Named color · #D8BAA6
Maiko
Maiko is #D8BAA6: rgb(216 186 166), hsl(24 39% 75%), oklch(0.809 0.044 55.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Maiko color name →
#D8BAA6
oklch(0.809 0.044 55.7)
Color conversions
- HEX
- #d8baa6
- RGB
- rgb(216 186 166)
- HSL
- hsl(24 39% 75%)
- HWB
- hwb(24 65% 15%)
- OKLCH
- oklch(0.809 0.044 55.7)
- OKLab
- oklab(0.809 0.025 0.036)
- CIE Lab
- lab(77.75 8.82 14.35)
- LCH
- lch(77.75 16.85 58.4)
- CMYK
- cmyk(0% 14% 23% 15%)
Tints · Shades · Tones
Tints
- DCC1AF
- E0C8B7
- E4CEC0
- E8D5C9
- ECDCD2
- F0E3DB
- F3EAE4
- F7F1ED
- FBF8F6
Shades
- BCA190
- A0897A
- 857265
- 6B5C51
- 53463E
- 3B322B
- 251E1A
- 110D0A
- 020201
Tones
- CFB4A2
- C6AE9E
- BDA89B
- B4A297
- AB9D93
- A2978F
- 9A918B
- 918B88
- 898684
Color harmonies
Complementary +180°
- D8BAA6
Maiko
- A6C6DA
≈ Frozen Blue
Analogous -30° +30°
- D8BAA6
Maiko
- DCB6B2
≈ Tea Room
- CEBFA1
≈ Bungalow Taupe
Triadic +120° +240°
- D8BAA6
Maiko
- A4CBBF
≈ Tareyton
- C3BCDB
≈ New Love
Split-complementary +150° +210°
- D8BAA6
Maiko
- A0C9CF
≈ Aqua Mist
- B3C1DE
≈ Eternal Elegance
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.82:1 · APCA Lc 34
Ag
AAAOn black
WCAG 11.49:1 · APCA Lc 68
Best text color: #000000
WCAG 11.49:1 (AAA) · APCA Lc 68
Contrast pairs
Code snippets
CSS
:root {
--maiko: #d8baa6;
--maiko-rgb: 216 186 166;
--maiko-oklch: oklch(0.809 0.044 55.7);
}
.element {
color: var(--maiko);
background-color: hsl(24 39% 75%);
border-color: oklch(0.809 0.044 55.7);
}Tailwind CSS v4
@theme {
--color-maiko: #d8baa6;
--color-maiko-50: #fff2e9;
--color-maiko-100: #f4e5da;
--color-maiko-200: #e3d0c2;
--color-maiko-300: #cab2a2;
--color-maiko-400: #b49886;
--color-maiko-500: #9e7f6a;
--color-maiko-600: #856c5a;
--color-maiko-700: #6b5648;
--color-maiko-800: #4f3e34;
--color-maiko-900: #372b23;
--color-maiko-950: #221812;
}SCSS
$maiko: #d8baa6;
$maiko-rgb: 216, 186, 166;
$maiko-light: mix(#fff, $maiko, 20%);
$maiko-dark: mix(#000, $maiko, 20%);
.element {
color: $maiko;
box-shadow: 0 0 0 2px rgba($maiko, 0.35);
}