Citrine Yellow Color Psychology & Meaning
Citrine is the optimism crystal — these warm yellows are the specific color of the quartz mineral, from pale lemon to deep amber, associated with abundance and manifestation.
#FFFAE0
#FFE060
#E8A800
#7A5000
Background
Primary Accent
Secondary
Body Text
Citrine Yellow
richbeautifulpremium all brandingluxury
AA
WCAG Grade
6.7:1
Contrast Ratio
1,900
Saves
5,100
AI Copies
Use #FFFAE0 as background. Use #FFE060 as primary accent. Use #E8A800 as secondary. Use #7A5000 as body text.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Citrine Yellow color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 95.0% | 255, 250, 224 | 0%, 2%, 12%, 0% | 50°, 100%, 94% | ||
| Primary Accent Luminance: 75.4% | 255, 224, 96 | 0%, 12%, 62%, 0% | 48°, 100%, 69% | ||
| Secondary Luminance: 45.2% | 232, 168, 0 | 0%, 28%, 100%, 9% | 43°, 100%, 45% | ||
| Body Text Luminance: 9.9% | 122, 80, 0 | 0%, 34%, 100%, 52% | 39°, 100%, 24% |
Color Harmony: Analogous Scheme
The Citrine Yellow palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Citrine as a crystal has been valued since ancient Rome. Its yellow-to-amber range has been adopted by crystal wellness brands and positivity-focused lifestyle companies.
Best Design Use Cases
Very pale yellow for surfaces. Light citrine for cards. Rich gold-yellow for interactive. Dark amber for text.
Industries This Palette Suits
Crystal brands, wellness, positive psychology brands, abundance coaching.
How to Implement the Citrine Yellow Color Scheme
To use this Citrine Yellow color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFFAE0 for the main background and #FFE060 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #7A5000 and #FFFAE0 is 6.72:1 (AA). Ensure your body text remains legible.