Named color · #DCE1B8
Lime Granita
Lime Granita is #DCE1B8: rgb(220 225 184), hsl(67 41% 80%), oklch(0.895 0.054 113.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Lime Granita color name →
#DCE1B8
oklch(0.895 0.054 113.2)
Color conversions
- HEX
- #dce1b8
- RGB
- rgb(220 225 184)
- HSL
- hsl(67 41% 80%)
- HWB
- hwb(67 72% 12%)
- OKLCH
- oklch(0.895 0.054 113.2)
- OKLab
- oklab(0.895 -0.021 0.05)
- CIE Lab
- lab(88.36 -6.81 19.56)
- LCH
- lch(88.36 20.71 109.2)
- CMYK
- cmyk(2% 0% 18% 12%)
Tints · Shades · Tones
Tints
- DFE4BF
- E3E7C6
- E6EACD
- EAEDD4
- EDF0DC
- F1F3E3
- F4F6EA
- F8F9F1
- FBFCF8
Shades
- BFC4A0
- A3A788
- 888B71
- 6E705B
- 545645
- 3C3E31
- 26271E
- 11120C
- 020202
Tones
- D2D7B2
- C9CDAD
- BFC3A7
- B6B9A2
- ADAF9C
- A4A696
- 9B9C91
- 92938B
- 898986
Color harmonies
Complementary +180°
- DCE1B8
Lime Granita
- DDD6FE
≈ Japan Blush
Analogous -30° +30°
- DCE1B8
Lime Granita
- EEDAB4
≈ Cinnamon Milk
- C8E6C6
≈ Wintergreen Mint
Triadic +120° +240°
- DCE1B8
Lime Granita
- BAE3FB
≈ Breaking the Ice
- FBCEDF
≈ Linnet Egg Red
Split-complementary +150° +210°
- DCE1B8
Lime Granita
- CBDDFF
≈ Arc Light
- EFD1F2
≈ Lavender Princess
Tetradic +90° +180° +270°
- DCE1B8
Lime Granita
- B3E8ED
≈ Winter Escape
- DDD6FE
≈ Japan Blush
- FFCFCC
≈ Aromatic Breeze
Contrast & accessibility
Ag
FailOn white
WCAG 1.35:1 · APCA Lc 17
Ag
AAAOn black
WCAG 15.50:1 · APCA Lc 86
Best text color: #000000
WCAG 15.50:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--lime-granita: #dce1b8;
--lime-granita-rgb: 220 225 184;
--lime-granita-oklch: oklch(0.895 0.054 113.2);
}
.element {
color: var(--lime-granita);
background-color: hsl(67 41% 80%);
border-color: oklch(0.895 0.054 113.2);
}Tailwind CSS v4
@theme {
--color-lime-granita: #dce1b8;
--color-lime-granita-50: #f4f7e6;
--color-lime-granita-100: #e7ead6;
--color-lime-granita-200: #d3d7bd;
--color-lime-granita-300: #b6bb9c;
--color-lime-granita-400: #9ea27d;
--color-lime-granita-500: #868a60;
--color-lime-granita-600: #717552;
--color-lime-granita-700: #5b5e41;
--color-lime-granita-800: #43442e;
--color-lime-granita-900: #2e2f1f;
--color-lime-granita-950: #1b1c0f;
}SCSS
$lime-granita: #dce1b8;
$lime-granita-rgb: 220, 225, 184;
$lime-granita-light: mix(#fff, $lime-granita, 20%);
$lime-granita-dark: mix(#000, $lime-granita, 20%);
.element {
color: $lime-granita;
box-shadow: 0 0 0 2px rgba($lime-granita, 0.35);
}