Named color · #FDBD27
Sunflower Valley
Sunflower Valley is #FDBD27: rgb(253 189 39), hsl(42 98% 57%), oklch(0.835 0.164 82.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Sunflower Valley color name →
#FDBD27
oklch(0.835 0.164 82.4)
Color conversions
- HEX
- #fdbd27
- RGB
- rgb(253 189 39)
- HSL
- hsl(42 98% 57%)
- HWB
- hwb(42 15% 1%)
- OKLCH
- oklch(0.835 0.164 82.4)
- OKLab
- oklab(0.835 0.022 0.162)
- CIE Lab
- lab(80.99 15.15 76.29)
- LCH
- lch(80.99 77.78 78.8)
- CMYK
- cmyk(0% 25% 85% 1%)
Tints · Shades · Tones
Tints
- FEC44D
- FECB67
- FED27E
- FFD992
- FFDFA5
- FFE6B8
- FFECCA
- FFF3DC
- FFF9EE
Shades
- DCA420
- BC8C1A
- 9D7414
- 7F5D0E
- 624708
- 473304
- 2D1F02
- 160D01
- 030200
Tones
- F0B73D
- E3B14C
- D6AB57
- CAA560
- BD9F67
- B1996E
- A49373
- 988D78
- 8C867C
Color harmonies
Complementary +180°
- FDBD27
Sunflower Valley
- ADCAFF
≈ Night Snow
Analogous -30° +30°
- FDBD27
Sunflower Valley
- FFB68A
≈ Coral Dusk
- CBD340
≈ Southern Platyfish
Triadic +120° +240°
- FDBD27
Sunflower Valley
- 00E3F1
≈ Cold Heights
- F4A9FF
≈ Rich Brilliant Lavender
Split-complementary +150° +210°
- FDBD27
Sunflower Valley
- 83D5FF
≈ Kul Sharif Blue
- CABFFF
≈ Lavender Tonic
Tetradic +90° +180° +270°
- FDBD27
Sunflower Valley
- 00EABE
≈ Aquamarine
- ADCAFF
≈ Night Snow
- FFACD0
≈ Majin Bū Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.68:1 · APCA Lc 30
Ag
AAAOn black
WCAG 12.48:1 · APCA Lc 73
Best text color: #000000
WCAG 12.48:1 (AAA) · APCA Lc 73
Contrast pairs
Code snippets
CSS
:root {
--sunflower-valley: #fdbd27;
--sunflower-valley-rgb: 253 189 39;
--sunflower-valley-oklch: oklch(0.835 0.164 82.4);
}
.element {
color: var(--sunflower-valley);
background-color: hsl(42 98% 57%);
border-color: oklch(0.835 0.164 82.4);
}Tailwind CSS v4
@theme {
--color-sunflower-valley: #fdbd27;
--color-sunflower-valley-50: #fff2c0;
--color-sunflower-valley-100: #ffe4a9;
--color-sunflower-valley-200: #f5cf80;
--color-sunflower-valley-300: #deb048;
--color-sunflower-valley-400: #cd9300;
--color-sunflower-valley-500: #ba7700;
--color-sunflower-valley-600: #9d6500;
--color-sunflower-valley-700: #7e5100;
--color-sunflower-valley-800: #5f3a00;
--color-sunflower-valley-900: #432700;
--color-sunflower-valley-950: #2b1500;
}SCSS
$sunflower-valley: #fdbd27;
$sunflower-valley-rgb: 253, 189, 39;
$sunflower-valley-light: mix(#fff, $sunflower-valley, 20%);
$sunflower-valley-dark: mix(#000, $sunflower-valley, 20%);
.element {
color: $sunflower-valley;
box-shadow: 0 0 0 2px rgba($sunflower-valley, 0.35);
}