Named color · #3C3024
Cola Bubble
Cola Bubble is #3C3024: rgb(60 48 36), hsl(30 25% 19%), oklch(0.319 0.027 66.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Cola Bubble color name →
#3C3024
oklch(0.319 0.027 66.6)
Color conversions
- HEX
- #3c3024
- RGB
- rgb(60 48 36)
- HSL
- hsl(30 25% 19%)
- HWB
- hwb(30 14% 76%)
- OKLCH
- oklch(0.319 0.027 66.6)
- OKLab
- oklab(0.319 0.011 0.025)
- CIE Lab
- lab(20.95 4.08 9.86)
- LCH
- lch(20.95 10.67 67.5)
- CMYK
- cmyk(0% 20% 40% 76%)
Tints · Shades · Tones
Tints
- 4D4237
- 5F554A
- 71685F
- 847C74
- 98918A
- ACA6A0
- C0BBB7
- D5D1CE
- EAE8E7
Shades
- 33281E
- 2A2118
- 211A12
- 19130C
- 110C07
- 0A0604
- 040302
- 010100
- 000000
Tones
- 42372D
- 493F35
- 50473E
- 564F47
- 5D5750
- 645F59
- 6B6763
- 726F6C
- 797776
Color harmonies
Complementary +180°
- 3C3024
Cola Bubble
- 273440
≈ Anchors Aweigh
Analogous -30° +30°
- 3C3024
Cola Bubble
- 3F2E29
≈ Chinese Ink
- 363323
≈ Fuchsia Berries
Triadic +120° +240°
- 3C3024
Cola Bubble
- 223735
≈ Kōrainando Green
- 362F3D
≈ Deep Well
Split-complementary +150° +210°
- 3C3024
Cola Bubble
- 23363B
≈ Cruel Sea
- 2F3140
≈ Salute
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 12.80:1 · APCA Lc 99
Ag
FailOn black
WCAG 1.64:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.80:1 (AAA) · APCA Lc 99
Contrast pairs
Code snippets
CSS
:root {
--cola-bubble: #3c3024;
--cola-bubble-rgb: 60 48 36;
--cola-bubble-oklch: oklch(0.319 0.027 66.6);
}
.element {
color: var(--cola-bubble);
background-color: hsl(30 25% 19%);
border-color: oklch(0.319 0.027 66.6);
}Tailwind CSS v4
@theme {
--color-cola-bubble: #3c3024;
--color-cola-bubble-50: #faf4ed;
--color-cola-bubble-100: #eee6df;
--color-cola-bubble-200: #dcd2c8;
--color-cola-bubble-300: #c1b5a9;
--color-cola-bubble-400: #aa9c8e;
--color-cola-bubble-500: #938374;
--color-cola-bubble-600: #7c6f62;
--color-cola-bubble-700: #63594e;
--color-cola-bubble-800: #494139;
--color-cola-bubble-900: #332d27;
--color-cola-bubble-950: #1e1a15;
}SCSS
$cola-bubble: #3c3024;
$cola-bubble-rgb: 60, 48, 36;
$cola-bubble-light: mix(#fff, $cola-bubble, 20%);
$cola-bubble-dark: mix(#000, $cola-bubble, 20%);
.element {
color: $cola-bubble;
box-shadow: 0 0 0 2px rgba($cola-bubble, 0.35);
}