Citrine

#E4D00A

What color is Citrine?

Citrine is a bold, warm yellow with a slightly greenish tint, hex #E4D00A, close to the color of a ripe lemon. The tone has a dull, earthy quality that keeps it from reading as a pure or bright yellow.

What is the meaning of the color Citrine?

French borrowed the word citrine from the Latin citrina, meaning yellow, and applied it to the pale yellow quartz gemstone by the 14th century. The stone was traded extensively in Scotland during the 17th and 18th centuries, where it was set into Highland dress accessories such as sword handles and brooches. As a color name, citrine entered English use through gemology and later textile trade, where the yellow-green hue was used to describe dyed silk and wool. Pantone formalized the color in its commercial system, and the shade gained a modern anchor when Pantone named a close variant in its fashion color reports for the 2020s.

RGB
228, 208, 10
HSL
54°, 92%, 47%
CMYK
0, 9, 96, 11
HSV
54°, 96%, 89%
Citrine color

What colors go with Citrine?

Colors that pair well with Citrine include:
Navy blue: sharp, cool contrast
Burnt orange: warm tonal depth
Forest green: natural, earthy balance
Charcoal gray: grounded, muted anchor
Cream: soft, lightening effect

Similar Colors

Conversions & Codes

Format Value CSS
HEX #E4D00A color: #E4D00A;
RGB 228, 208, 10 color: rgb(228, 208, 10);
RGB Percentage 89%, 82%, 4% color: rgb(89%, 82%, 4%);
CMYK 0%, 9%, 96%, 11% Not supported in CSS
HSL 54°, 92%, 47% color: hsl(54, 92%, 47%);
HSV 54°, 96%, 89% Not supported in CSS
CIE-LAB 38, 4, 66 color: lab(38% 4 66);
Decimal 14995466 Not supported in CSS

Color Variations

Shades

#E6D00A
#CFBB09
#B8A608
#A19207
#8A7D06
#736805
#5C5304
#453E03

Tints

#FCF4B1
#FBF197
#FAED7D
#F9EA63
#F7E649
#F6E22F
#F5DF15
#E6D00A

Tones

#E6D00A
#DBC715
#D0BE20
#C5B62B
#BAAD36
#AFA441
#A49B4C
#999257

Hues

#E6D00A
#57E60A
#0AE662
#0AC5E6
#0A20E6
#990AE6
#E60A8E
#E62B0A

Color Harmonies

Analogous

#E6620A
Click to copy
#E4D00A
Click to copy
#8EE60A
Click to copy

Complementary

#E4D00A
Click to copy
#0A20E6
Click to copy
96%

Split Complementary

#E4D00A
Click to copy
#0A8EE6
Click to copy
#620AE6
Click to copy

Triadic

#E4D00A
Click to copy
#0AE6D0
Click to copy
#D00AE6
Click to copy

Tetradic

#E4D00A
Click to copy
#0AE662
Click to copy
#0A20E6
Click to copy
96%
#E60A8E
Click to copy

Square

#E4D00A
Click to copy
#0AE662
Click to copy
#0A20E6
Click to copy
96%
#E60A8E
Click to copy

CSS & Dev Snippets

CSS
.citrine {
  color: #E4D00A;
}
SCSS
$citrine: #E4D00A;
RGB
rgb(228, 208, 10)

Accessibility & Contrast

White background

1.58:1
1.58
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

13.33:1
13.33
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags