Benannte Farbe · #CDD6B1
Avocado Whip
Avocado Whip ist #CDD6B1: rgb(205 214 177), hsl(75 31% 77%), oklch(0.859 0.051 118.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Avocado Whip color name →
#CDD6B1
oklch(0.859 0.051 118.6)
Farbumrechnungen
- HEX
- #cdd6b1
- RGB
- rgb(205 214 177)
- HSL
- hsl(75 31% 77%)
- HWB
- hwb(75 69% 16%)
- OKLCH
- oklch(0.859 0.051 118.6)
- OKLab
- oklab(0.859 -0.024 0.044)
- CIE Lab
- lab(84.2 -7.88 17.27)
- LCH
- lch(84.2 18.99 114.5)
- CMYK
- cmyk(4% 0% 17% 16%)
Tints · Shades · Tones
Tints
- D2DAB9
- D7DEC0
- DCE2C8
- E1E6D0
- E6EAD8
- EBEFE0
- F0F3E7
- F5F7EF
- FAFBF7
Shades
- B2BA99
- 989E83
- 7E846C
- 666A57
- 4E5242
- 383B2F
- 23251C
- 0F100C
- 020201
Tones
- C5CDAC
- BDC4A7
- B5BBA2
- ADB39D
- A6AA98
- 9EA294
- 96998F
- 8F918A
- 878885
Farbharmonien
Komplementär +180°
- CDD6B1
Avocado Whip
- D5CAEE
≈ Foggy Love
Analog -30° +30°
- CDD6B1
Avocado Whip
- DED0AC
≈ Champagne Bubbles
- BBDBBF
≈ Grasshopper Pie
Triadisch +120° +240°
- CDD6B1
Avocado Whip
- B3D6EF
≈ Blue Rice
- EEC4D0
≈ Desire Pink
Geteilt komplementär +150° +210°
- CDD6B1
Avocado Whip
- C3D0F3
≈ Frozen Periwinkle
- E4C6E2
≈ Sweet Alyssum
Tetradisch +90° +180° +270°
- CDD6B1
Avocado Whip
- ABDBE2
≈ Geyser Pool
- D5CAEE
≈ Foggy Love
- F0C5BE
≈ Strawberry Risotto
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.51:1 · APCA Lc 24
Ag
AAAAuf Schwarz
WCAG 13.84:1 · APCA Lc 79
Beste Textfarbe: #000000
WCAG 13.84:1 (AAA) · APCA Lc 79
Contrast pairs
Code-Snippets
CSS
:root {
--avocado-whip: #cdd6b1;
--avocado-whip-rgb: 205 214 177;
--avocado-whip-oklch: oklch(0.859 0.051 118.6);
}
.element {
color: var(--avocado-whip);
background-color: hsl(75 31% 77%);
border-color: oklch(0.859 0.051 118.6);
}Tailwind CSS v4
@theme {
--color-avocado-whip: #cdd6b1;
--color-avocado-whip-50: #f3f8e8;
--color-avocado-whip-100: #e5ebd8;
--color-avocado-whip-200: #d1d8c0;
--color-avocado-whip-300: #b3bc9f;
--color-avocado-whip-400: #9ba381;
--color-avocado-whip-500: #828b65;
--color-avocado-whip-600: #6e7656;
--color-avocado-whip-700: #585e44;
--color-avocado-whip-800: #414531;
--color-avocado-whip-900: #2d3021;
--color-avocado-whip-950: #1a1c10;
}SCSS
$avocado-whip: #cdd6b1;
$avocado-whip-rgb: 205, 214, 177;
$avocado-whip-light: mix(#fff, $avocado-whip, 20%);
$avocado-whip-dark: mix(#000, $avocado-whip, 20%);
.element {
color: $avocado-whip;
box-shadow: 0 0 0 2px rgba($avocado-whip, 0.35);
}