#CAAE3F

Accessibility

AAA

9.64:1

Vs white / black

2.18:1 · 9.64:1

Sources

Library color

Codes

Formats

HEX

#caae3f

RGB

rgb(202, 174, 63)

RGBA

rgba(202, 174, 63, 1)

HSL

hsl(48, 57%, 52%)

HSLA

hsla(48, 57%, 52%, 1)

HSV

hsv(48, 69%, 79%)

LAB

lab(71.68% -2.03 58.28)

LCH

lch(71.68% 58.32 91.99)

OKLAB

oklab(0.7553 -0.0108 0.1307)

OKLCH

oklch(0.7553 0.1311 94.72)

XYZ

xyz(40.39, 43.19, 10.91)

CMYK

cmyk(0%, 14%, 69%, 21%)

CSS

color: #caae3f;

CSS variable

--color-caae3f: #caae3f;

SCSS

$color-caae3f: #caae3f;

JavaScript

const color = "#caae3f";

TypeScript

const color: string = "#caae3f";

React

style={{ backgroundColor: "#caae3f" }}

JSON

{ "hex": "#caae3f", "rgb": { "r": 202, "g": 174, "b": 63 }, "oklch": "oklch(0.7553 0.1311 94.72)" }

Export

Developer code

css

:root {
  --#caae3f-1: #caae3f;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

yellow-500

Very different · ΔE 8.01 · #EAB308

Nearest CSS named color

GoldenRod

Very different · ΔE 7 · #DAA520

Nearest Material color

lime-700

Very different · ΔE 9.13 · #AFB42B

Nearest Bootstrap color

warning

Very different · ΔE 11.17 · #FFC107

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50fff5b8 100fae8a5 200e9d485 300d5bd60 400bca02d 5009f8400 600866e00 7006c5800 800534200 9003b2e00 950241900

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

fbf8ef f6f2df f2ebcf ede4bf e9ddaf e5d79f e0d08f dcc97f d7c26f d3bc5f ceb54f caae3f b9a03a a89135 98832f 87742a 766525 655720 54491a 433a15 332c10 221d0a 110f05

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fbf8ef f6f2df f2ebcf ede4bf e9ddaf e5d79f e0d08f dcc97f d7c26f d3bc5f ceb54f

Palette

Shades

Mixed toward black — depth, text, and emphasis

b9a03a a89135 98832f 87742a 766525 655720 54491a 433a15 332c10 221d0a 110f05

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

c4aa44 bea64a b8a34f b19f55 ab9b5a a59760 9f9365 998f6a 938c70 8c8875 86847b

Harmony

Complementary

Opposite on the color wheel for contrast

#CAAE3FStop 1 #3F5BCAStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#CA693FStop 1 #CAAE3FStop 2 #A1CA3FStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#CAAE3FStop 1 #3FCAAEStop 2 #AE3FCAStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#CAAE3FStop 1 #3FA1CAStop 2 #693FCAStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#504416Stop 1 #8C7826Stop 2 #C8AB37Stop 3 #D9C473Stop 4 #E9DDAFStop 5

Using this color

Where #caae3f works

#CAAE3F (#caae3f) sits in the amber family at about 48° hue, 57% saturation, and 52% lightness. Contrast is 2.18:1 on white and 9.64:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: yellow-500 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

primary buttons and key accents
text or icons on charcoal / dark mode

Do not use #caae3f as small body text on white — 2.18:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Confidence, warmth, and caution. Useful for notifications and premium earthy palettes. Common uses still include buttons, charts, and accents in the Amber range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Spectrum #C9B254#C9B254 Spectrum #D6B72E#D6B72E Spectrum #D0AC53#D0AC53 Spectrum #BBA03E#BBA03E Spectrum #D7B614#D7B614 Spectrum #D0BD35#D0BD35 Spectrum #C4B75A#C4B75A Spectrum #E4BD49#E4BD49 Spectrum #DCAC28#DCAC28 Spectrum #B1A343#B1A343 Spectrum #AF9E2C#AF9E2C Spectrum #D9BC6D#D9BC6D