Named color · #F5DEB3
Gruyère Cheese
Gruyère Cheese is #F5DEB3: rgb(245 222 179), hsl(39 77% 83%), oklch(0.909 0.061 83). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Gruyère Cheese color name →
#F5DEB3
oklch(0.909 0.061 83)
Color conversions
- HEX
- #f5deb3
- RGB
- rgb(245 222 179)
- HSL
- hsl(39 77% 83%)
- HWB
- hwb(39 70% 4%)
- OKLCH
- oklch(0.909 0.061 83)
- OKLab
- oklab(0.909 0.007 0.061)
- CIE Lab
- lab(89.59 3.48 24.21)
- LCH
- lch(89.59 24.46 81.8)
- CMYK
- cmyk(0% 9% 27% 4%)
Tints · Shades · Tones
Tints
- F6E1BB
- F7E5C2
- F8E8CA
- F9EBD2
- FAEFD9
- FBF2E1
- FCF5E8
- FDF8F0
- FEFCF7
Shades
- D5C19B
- B6A584
- 98896E
- 7B6F58
- 5F5543
- 443D2F
- 2B261D
- 15120C
- 030201
Tones
- E9D4AE
- DDCBA9
- D1C1A4
- C5B79F
- B9AE9A
- ADA595
- A29B90
- 96928A
- 8B8985
Color harmonies
Complementary +180°
- F5DEB3
Gruyère Cheese
- D2E2FF
≈ Arc Light
Analogous -30° +30°
- F5DEB3
Gruyère Cheese
- FFD8C0
≈ Sun-Kissed Peach
- E0E6B7
≈ Tusk
Triadic +120° +240°
- F5DEB3
Gruyère Cheese
- B1EEF3
≈ Mint Macaron
- F6D4F9
≈ Pink Diamond
Split-complementary +150° +210°
- F5DEB3
Gruyère Cheese
- BFE8FF
≈ Blue Java Banana
- E1DCFF
≈ Transparent Blue
Tetradic +90° +180° +270°
- F5DEB3
Gruyère Cheese
- B8EFDD
≈ Salome
- D2E2FF
≈ Arc Light
- FFD3E4
≈ Poplar Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.31:1 · APCA Lc 16
Ag
AAAOn black
WCAG 15.98:1 · APCA Lc 88
Best text color: #000000
WCAG 15.98:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--gruyere-cheese: #f5deb3;
--gruyere-cheese-rgb: 245 222 179;
--gruyere-cheese-oklch: oklch(0.909 0.061 83);
}
.element {
color: var(--gruyere-cheese);
background-color: hsl(39 77% 83%);
border-color: oklch(0.909 0.061 83);
}Tailwind CSS v4
@theme {
--color-gruyere-cheese: #f5deb3;
--color-gruyere-cheese-50: #fdf4e2;
--color-gruyere-cheese-100: #f1e7d1;
--color-gruyere-cheese-200: #e0d3b7;
--color-gruyere-cheese-300: #c6b694;
--color-gruyere-cheese-400: #b09c75;
--color-gruyere-cheese-500: #9a8356;
--color-gruyere-cheese-600: #826f49;
--color-gruyere-cheese-700: #68593a;
--color-gruyere-cheese-800: #4d4029;
--color-gruyere-cheese-900: #362c1c;
--color-gruyere-cheese-950: #21190c;
}SCSS
$gruyere-cheese: #f5deb3;
$gruyere-cheese-rgb: 245, 222, 179;
$gruyere-cheese-light: mix(#fff, $gruyere-cheese, 20%);
$gruyere-cheese-dark: mix(#000, $gruyere-cheese, 20%);
.element {
color: $gruyere-cheese;
box-shadow: 0 0 0 2px rgba($gruyere-cheese, 0.35);
}