Named color · #F9BC08
Chocobo Feather
Chocobo Feather is #F9BC08: rgb(249 188 8), hsl(45 95% 50%), oklch(0.828 0.169 84.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Chocobo Feather color name →
#F9BC08
oklch(0.828 0.169 84.7)
Color conversions
- HEX
- #f9bc08
- RGB
- rgb(249 188 8)
- HSL
- hsl(45 95% 50%)
- HWB
- hwb(45 3% 2%)
- OKLCH
- oklch(0.828 0.169 84.7)
- OKLab
- oklab(0.828 0.016 0.168)
- CIE Lab
- lab(80.26 13.63 80.78)
- LCH
- lch(80.26 81.93 80.4)
- CMYK
- cmyk(0% 24% 97% 2%)
Tints · Shades · Tones
Tints
- FAC342
- FBCA60
- FCD178
- FCD88E
- FDDFA2
- FDE6B5
- FEECC8
- FEF2DB
- FFF9ED
Shades
- D9A306
- B98B04
- 9A7303
- 7D5D02
- 614701
- 463201
- 2C1F00
- 150D00
- 030200
Tones
- ECB631
- E0B043
- D4AB51
- C7A55B
- BB9F64
- AF996B
- A39371
- 978D77
- 8C867C
Color harmonies
Complementary +180°
- F9BC08
Chocobo Feather
- ACC7FF
≈ Night Snow
Analogous -30° +30°
- F9BC08
Chocobo Feather
- FFB380
≈ Sassy Peach
- C5D33A
≈ Fuego Verde
Triadic +120° +240°
- F9BC08
Chocobo Feather
- 00E0F2
≈ Tamarama
- F9A1FF
≈ Rich Brilliant Lavender
Split-complementary +150° +210°
- F9BC08
Chocobo Feather
- 82D2FF
≈ Drift on the Sea
- CABBFF
≈ Lavender Tonic
Tetradic +90° +180° +270°
- F9BC08
Chocobo Feather
- 00E7C0
≈ Aquamarine
- ACC7FF
≈ Night Snow
- FFA9CB
≈ Majin Bū Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.71:1 · APCA Lc 31
Ag
AAAOn black
WCAG 12.22:1 · APCA Lc 72
Best text color: #000000
WCAG 12.22:1 (AAA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--chocobo-feather: #f9bc08;
--chocobo-feather-rgb: 249 188 8;
--chocobo-feather-oklch: oklch(0.828 0.169 84.7);
}
.element {
color: var(--chocobo-feather);
background-color: hsl(45 95% 50%);
border-color: oklch(0.828 0.169 84.7);
}Tailwind CSS v4
@theme {
--color-chocobo-feather: #f9bc08;
--color-chocobo-feather-50: #fff3be;
--color-chocobo-feather-100: #ffe5a7;
--color-chocobo-feather-200: #f4d07d;
--color-chocobo-feather-300: #ddb142;
--color-chocobo-feather-400: #cc9400;
--color-chocobo-feather-500: #b97800;
--color-chocobo-feather-600: #9c6600;
--color-chocobo-feather-700: #7d5100;
--color-chocobo-feather-800: #5e3a00;
--color-chocobo-feather-900: #422800;
--color-chocobo-feather-950: #2a1500;
}SCSS
$chocobo-feather: #f9bc08;
$chocobo-feather-rgb: 249, 188, 8;
$chocobo-feather-light: mix(#fff, $chocobo-feather, 20%);
$chocobo-feather-dark: mix(#000, $chocobo-feather, 20%);
.element {
color: $chocobo-feather;
box-shadow: 0 0 0 2px rgba($chocobo-feather, 0.35);
}