Named color · #DAB7A8
Toasted Beige
Toasted Beige is #DAB7A8: rgb(218 183 168), hsl(18 40% 76%), oklch(0.806 0.046 44.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Toasted Beige color name →
#DAB7A8
oklch(0.806 0.046 44.5)
Color conversions
- HEX
- #dab7a8
- RGB
- rgb(218 183 168)
- HSL
- hsl(18 40% 76%)
- HWB
- hwb(18 66% 15%)
- OKLCH
- oklch(0.806 0.046 44.5)
- OKLab
- oklab(0.806 0.033 0.032)
- CIE Lab
- lab(77.23 11.31 12.6)
- LCH
- lch(77.23 16.93 48.1)
- CMYK
- cmyk(0% 16% 23% 15%)
Tints · Shades · Tones
Tints
- DEBEB0
- E2C5B9
- E5CCC2
- E9D3CA
- EDDBD3
- F1E2DC
- F4E9E4
- F8F0ED
- FBF8F6
Shades
- BD9F92
- A2877C
- 877067
- 6C5A52
- 54453F
- 3C312C
- 251E1A
- 110C0A
- 020201
Tones
- D1B1A4
- C8ACA0
- BEA69C
- B5A198
- AC9B94
- A39690
- 9A908C
- 928B88
- 898584
Color harmonies
Complementary +180°
- DAB7A8
Toasted Beige
- A1C7D6
≈ Corydalis Blue
Analogous -30° +30°
- DAB7A8
Toasted Beige
- DCB4B6
≈ Peachskin
- D2BCA0
≈ Gaia
Triadic +120° +240°
- DAB7A8
Toasted Beige
- A5C9B8
≈ Bird’s Egg Green
- BCBCDD
≈ Wisteria Fragrance
Split-complementary +150° +210°
- DAB7A8
Toasted Beige
- 9EC9C8
≈ Aqua Mist
- ACC2DD
≈ Cloudy Blue
Tetradic +90° +180° +270°
- DAB7A8
Toasted Beige
- B4C7A9
≈ Freshwater Green
- A1C7D6
≈ Corydalis Blue
- CBB7D5
≈ Liberace
Contrast & accessibility
Ag
FailOn white
WCAG 1.85:1 · APCA Lc 35
Ag
AAAOn black
WCAG 11.31:1 · APCA Lc 68
Best text color: #000000
WCAG 11.31:1 (AAA) · APCA Lc 68
Contrast pairs
Code snippets
CSS
:root {
--toasted-beige: #dab7a8;
--toasted-beige-rgb: 218 183 168;
--toasted-beige-oklch: oklch(0.806 0.046 44.5);
}
.element {
color: var(--toasted-beige);
background-color: hsl(18 40% 76%);
border-color: oklch(0.806 0.046 44.5);
}Tailwind CSS v4
@theme {
--color-toasted-beige: #dab7a8;
--color-toasted-beige-50: #fff2ea;
--color-toasted-beige-100: #f6e4db;
--color-toasted-beige-200: #e6cfc4;
--color-toasted-beige-300: #ccb1a4;
--color-toasted-beige-400: #b69689;
--color-toasted-beige-500: #a17d6e;
--color-toasted-beige-600: #886a5d;
--color-toasted-beige-700: #6d554a;
--color-toasted-beige-800: #503d36;
--color-toasted-beige-900: #382a25;
--color-toasted-beige-950: #231813;
}SCSS
$toasted-beige: #dab7a8;
$toasted-beige-rgb: 218, 183, 168;
$toasted-beige-light: mix(#fff, $toasted-beige, 20%);
$toasted-beige-dark: mix(#000, $toasted-beige, 20%);
.element {
color: $toasted-beige;
box-shadow: 0 0 0 2px rgba($toasted-beige, 0.35);
}