Named color · #D3A49A
Bubble Shell
Bubble Shell is #D3A49A: rgb(211 164 154), hsl(11 39% 72%), oklch(0.759 0.058 32.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Bubble Shell color name →
#D3A49A
oklch(0.759 0.058 32.2)
Color conversions
- HEX
- #d3a49a
- RGB
- rgb(211 164 154)
- HSL
- hsl(11 39% 72%)
- HWB
- hwb(11 60% 17%)
- OKLCH
- oklch(0.759 0.058 32.2)
- OKLab
- oklab(0.759 0.049 0.031)
- CIE Lab
- lab(71.6 16.82 12.22)
- LCH
- lch(71.6 20.79 36)
- CMYK
- cmyk(0% 22% 27% 17%)
Tints · Shades · Tones
Tints
- D8ADA4
- DCB6AE
- E1BFB8
- E5C8C2
- EAD1CC
- EEDAD6
- F2E3E0
- F7ECEA
- FBF6F5
Shades
- B78E85
- 9C7971
- 82645E
- 69504B
- 513D39
- 3A2B27
- 241A17
- 100A09
- 020101
Tones
- CBA097
- C29D95
- BA9992
- B29690
- A9928D
- A18E8A
- 998B88
- 908785
- 888483
Color harmonies
Complementary +180°
- D3A49A
Bubble Shell
- 86BBC6
≈ Misty Cold Sea
Analogous -30° +30°
- D3A49A
Bubble Shell
- D1A2AE
≈ Birthday Candle
- CCA98C
≈ Riviera Clay
Triadic +120° +240°
- D3A49A
Bubble Shell
- 96BC9F
≈ Green-Eyed Lady
- A4AFD6
≈ Calm Interlude
Split-complementary +150° +210°
- D3A49A
Bubble Shell
- 88BDB4
≈ Morning Green
- 91B6D3
≈ Oxygen Blue
Tetradic +90° +180° +270°
- D3A49A
Bubble Shell
- AAB78F
≈ Casa Verde
- 86BBC6
≈ Misty Cold Sea
- B7A9D0
≈ Wisteria-Wise
Contrast & accessibility
Ag
FailOn white
WCAG 2.19:1 · APCA Lc 43
Ag
AAAOn black
WCAG 9.54:1 · APCA Lc 59
Best text color: #000000
WCAG 9.54:1 (AAA) · APCA Lc 59
Contrast pairs
Code snippets
CSS
:root {
--bubble-shell: #d3a49a;
--bubble-shell-rgb: 211 164 154;
--bubble-shell-oklch: oklch(0.759 0.058 32.2);
}
.element {
color: var(--bubble-shell);
background-color: hsl(11 39% 72%);
border-color: oklch(0.759 0.058 32.2);
}Tailwind CSS v4
@theme {
--color-bubble-shell: #d3a49a;
--color-bubble-shell-50: #fff0ea;
--color-bubble-shell-100: #fbe2db;
--color-bubble-shell-200: #ecccc4;
--color-bubble-shell-300: #d3ada4;
--color-bubble-shell-400: #be9289;
--color-bubble-shell-500: #a9786e;
--color-bubble-shell-600: #8f665d;
--color-bubble-shell-700: #73514a;
--color-bubble-shell-800: #553b36;
--color-bubble-shell-900: #3b2825;
--color-bubble-shell-950: #251614;
}SCSS
$bubble-shell: #d3a49a;
$bubble-shell-rgb: 211, 164, 154;
$bubble-shell-light: mix(#fff, $bubble-shell, 20%);
$bubble-shell-dark: mix(#000, $bubble-shell, 20%);
.element {
color: $bubble-shell;
box-shadow: 0 0 0 2px rgba($bubble-shell, 0.35);
}