#CFA030

Accessibility

AAA

8.72:1

Vs white / black

2.41:1 · 8.72:1

Sources

Library color

Codes

Formats

HEX

#cfa030

RGB

rgb(207, 160, 48)

RGBA

rgba(207, 160, 48, 1)

HSL

hsl(42, 62%, 50%)

HSLA

hsla(42, 62%, 50%, 1)

HSV

hsv(42, 77%, 81%)

LAB

lab(68.48% 6.91 61.17)

LCH

lch(68.48% 61.56 83.55)

OKLAB

oklab(0.7308 0.0128 0.1337)

OKLCH

oklch(0.7308 0.1343 84.53)

XYZ

xyz(38.84, 38.62, 8.21)

CMYK

cmyk(0%, 23%, 77%, 19%)

CSS

color: #cfa030;

CSS variable

--color-cfa030: #cfa030;

SCSS

$color-cfa030: #cfa030;

JavaScript

const color = "#cfa030";

TypeScript

const color: string = "#cfa030";

React

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

JSON

{ "hex": "#cfa030", "rgb": { "r": 207, "g": 160, "b": 48 }, "oklch": "oklch(0.7308 0.1343 84.53)" }

Export

Developer code

css

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

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 6.9 · #EAB308

Nearest CSS named color

GoldenRod

Noticeably different · ΔE 2.71 · #DAA520

Nearest Material color

yellow-800

Very different · ΔE 9.11 · #F9A825

Nearest Bootstrap color

warning

Very different · ΔE 10.8 · #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.

50fff2b6 100ffe4a3 200f4cf82 300e1b75d 400c89927 500ab7e00 600906900 700745300 8005a3e00 900402b00 950291600

Palette

Tints & shades

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

fbf7ee f7efdd f3e7cb efdfba ebd7a9 e7d098 e3c886 dfc075 dbb864 d7b053 d3a841 cfa030 be932c ad8528 9b7824 8a6b20 795d1c 685018 564314 453510 34280c 221b08 110d04

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fbf7ee f7efdd f3e7cb efdfba ebd7a9 e7d098 e3c886 dfc075 dbb864 d7b053 d3a841

Palette

Shades

Mixed toward black — depth, text, and emphasis

be932c ad8528 9b7824 8a6b20 795d1c 685018 564314 453510 34280c 221b08 110d04

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

c89d37 c29b3d bb9844 b5954b ae9351 a89058 a18d5f 9a8b65 94886c 8d8573 878379

Harmony

Complementary

Opposite on the color wheel for contrast

#CFA030Stop 1 #3060CFStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#CF5030Stop 1 #CFA030Stop 2 #AFCF30Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#CFA030Stop 1 #30CF9FStop 2 #9F30CFStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#CFA030Stop 1 #30AFCFStop 2 #5030CFStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#534013Stop 1 #916F22Stop 2 #CF9F30Stop 3 #DDBC6EStop 4 #ECD9ACStop 5

Using this color

Where #cfa030 works

#CFA030 (#cfa030) sits in the orange family at about 42° hue, 62% saturation, and 50% lightness. Contrast is 2.41:1 on white and 8.72: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 #cfa030 as small body text on white — 2.41: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: Creativity, enthusiasm, and friendliness. Approachable CTAs and lifestyle brands. Common uses still include buttons, charts, and accents in the Orange range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Web Safe #CC9933#CC9933 GoldenRod#DAA520 Web Safe #CC9900#CC9900 Spectrum #C29838#C29838 Spectrum #D5A64D#D5A64D Spectrum #DCAC28#DCAC28 Spectrum #DDA90E#DDA90E Spectrum #BF9222#BF9222 Spectrum #D0AC53#D0AC53 Spectrum #E4A125#E4A125 Spectrum #C89132#C89132 Spectrum #BBA03E#BBA03E