Light Color

#F7F7D6

Approximate Color Name: LightGoldenrodYellow

Closest CSS Color Name: LightGoldenrodYellow (#FAFAD2)

Color Space Coordinates

Copyable codes for development, CSS styling, and print

HEX#F7F7D6
RGBrgb(247, 247, 214)
HSLhsl(60, 67%, 90%)
HSV / HSBhsv(60, 13.4%, 96.9%)
CMYK (Print)cmyk(0%, 0%, 13%, 3%)
OKLCH (CSS4)oklch(0.968 0.043 107.6)
OKLaboklab(0.968 -0.013 0.041)
Tailwind CSSbg-[#F7F7D6]
Check WCAG ContrastGenerate Shades & TintsBuild Palette

WCAG 2.1 Contrast & Accessibility Audit

Evaluates readability standards for normal body text (4.5:1 AA / 7.0:1 AAA) and large headings (3.0:1 AA / 4.5:1 AAA)

Against Pure White (#FFFFFF)1.09:1
White Text on #F7F7D6
AA Normal Text
AAA Normal Text
Against Pure Black (#000000)19.23:1
Black Text on #F7F7D6
AA Normal Text
AAA Normal Text

Tonal Variations (Shades, Tints & Tones)

Calibrated step variations created by adding black (shades), white (tints), and gray (tones)

Shades (Darker with Black)
#F7F7D6
#DEDEC1
#C6C6AB
#ADAD96
#949480
#7C7C6B
#636356
#4A4A40
#31312B
#191915
#000000
Tints (Lighter with White)
#F7F7D6
#F8F8DA
#F9F9DE
#F9F9E2
#FAFAE6
#FBFBEB
#FCFCEF
#FDFDF3
#FDFDF7
#FEFEFB
#FFFFFF
Tones (Muted with Gray)
#F7F7D6
#EBEBCD
#DFDFC5
#D3D3BC
#C7C7B4
#BCBCAB
#B0B0A2
#A4A49A
#989891
#8C8C89
#808080

Harmonies for #F7F7D6 (LightGoldenrodYellow)

Classical color wheel pairings calculated from 360-degree rotational angles

Complementary (180°)

Opposite
#F7F7D6#D4D4F7

Triadic (120° / 240°)

Equidistant
#F7F7D6#D4F7F7#F7D4F7

Analogous (±30°)

Adjacent
#F7E6D4#F7F7D6#E6F7D4

Split-Complementary (150° / 210°)

Soft Contrast
#F7F7D6#D4E5F7#E5D4F7

Practical UI/UX Design Usage for #F7F7D6

Primary Buttons & Focus Rings

With an RGB luminance of 247, 247, 214, this shade works best with dark text (#0F172A) for call-to-action buttons and form focus states.

Background Containers

To use #F7F7D6 as a card background or subtle surface tint, apply an opacity of 5% to 15% (bg-[#F7F7D6]/10 in Tailwind) to maintain high typography readability.

Data Visualization & Badges

Pair with its complementary accent #D4D4F7 or triadic partner #D4F7F7 to distinguish distinct categories in charts and tables.

Explore More Popular Colors

View All Colors Directory →
Light
#FF5733
Persimmon Red255,87,51
Explore Color Details
Dark
#3B82F6
Bright Blue59,130,246
Explore Color Details
Light
#10B981
Emerald Green16,185,129
Explore Color Details
Light
#F59E0B
Amber Glow245,158,11
Explore Color Details
Dark
#8B5CF6
Vivid Purple139,92,246
Explore Color Details
Light
#EC4899
Pink Rose236,72,153
Explore Color Details

Tools & Utilities for #F7F7D6

Explore gradients, test contrast ratios, and generate monochromatic shades with #F7F7D6

All Tools →

Contrast Checker

Verify WCAG 2.1 AA/AAA compliance on #F7F7D6 surfaces.

Shades & Tints Scale

Generate 10-step tints and dark shade ramp tokens.

Gradient Generator

Build CSS linear and radial gradients starting with #F7F7D6.

Palette Generator

Lock #F7F7D6 and generate complementary 5-color palettes.

Related Educational Guides

Learn how color models, web contrast standards, and conversion mathematics work

All Guides →
Color Fundamentals

What is a HEX Color Code? Complete Hexadecimal Color Guide

Understand how 6-digit (#RRGGBB), 3-digit (#RGB), and 8-digit (#RRGGBBAA) hexadecimal color codes work, from base-16 mathematics to browser rendering.

6 min readRead →
Web Development

HEX vs RGB Color Formats: Differences, Math & When to Use Which

A deep technical comparison between HEX and RGB/RGBA color models in web development, CSS stylesheets, design systems, and rendering engines.

7 min readRead →
Color Fundamentals

RGB vs CMYK: Additive Screen Light vs Subtractive Print Ink

Learn why digital colors look different when printed. Explore the physics of additive RGB light versus subtractive CMYK ink and how to avoid gamut clipping.

8 min readRead →