Nearest named color · #F2C999
#F2C999
Nearest named color: Granola
#F2C999 (rgb(242 201 153), hsl(32 77% 77%), oklch(0.86 0.078 70.9)) is closest to the named color Granola. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#F2C999
oklch(0.86 0.078 70.9)
Color conversions
- HEX
- #f2c999
- RGB
- rgb(242 201 153)
- HSL
- hsl(32 77% 77%)
- HWB
- hwb(32 60% 5%)
- OKLCH
- oklch(0.86 0.078 70.9)
- OKLab
- oklab(0.86 0.025 0.074)
- CIE Lab
- lab(83.74 10.24 29.76)
- LCH
- lch(83.74 31.47 71)
- CMYK
- cmyk(0% 17% 37% 5%)
Tints · Shades · Tones
Tints
- F4CEA3
- F5D4AE
- F6D9B8
- F8DFC2
- F9E4CC
- FAEAD7
- FCEFE1
- FDF4EB
- FEFAF5
Shades
- D2AE84
- B49570
- 967C5D
- 79644A
- 5E4C38
- 433627
- 2B2217
- 140F08
- 030201
Tones
- E6C297
- DABA95
- CFB392
- C3AB90
- B8A48E
- AC9D8B
- A19688
- 968E86
- 8B8783
Color harmonies
Complementary +180°
- F2C999
Granola
- AFD5FF
≈ Malmö FF
Analogous -30° +30°
- F2C999
Granola
- FEC1AA
≈ Porcellana
- DCD398
≈ That’s My Lime
Triadic +120° +240°
- F2C999
Granola
- 93E2DD
≈ Aqua Fiesta
- E1C3F7
≈ Neon Boneyard
Split-complementary +150° +210°
- F2C999
Granola
- 96DDF5
≈ Sora Blue
- C8CCFF
≈ Lavender Blue
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.54:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.59:1 · APCA Lc 78
Best text color: #000000
WCAG 13.59:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--granola: #f2c999;
--granola-rgb: 242 201 153;
--granola-oklch: oklch(0.86 0.078 70.9);
}
.element {
color: var(--granola);
background-color: hsl(32 77% 77%);
border-color: oklch(0.86 0.078 70.9);
}Tailwind CSS v4
@theme {
--color-granola: #f2c999;
--color-granola-50: #fff2dd;
--color-granola-100: #f8e4cc;
--color-granola-200: #e9d0b0;
--color-granola-300: #d0b28c;
--color-granola-400: #bc976b;
--color-granola-500: #a77d4a;
--color-granola-600: #8d6a3f;
--color-granola-700: #715532;
--color-granola-800: #543d23;
--color-granola-900: #3b2a18;
--color-granola-950: #251809;
}SCSS
$granola: #f2c999;
$granola-rgb: 242, 201, 153;
$granola-light: mix(#fff, $granola, 20%);
$granola-dark: mix(#000, $granola, 20%);
.element {
color: $granola;
box-shadow: 0 0 0 2px rgba($granola, 0.35);
}