Named color · #008C6C
Festive Green
Festive Green is #008C6C: rgb(0 140 108), hsl(166 100% 27%), oklch(0.569 0.113 169.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Festive Green color name →
#008C6C
oklch(0.569 0.113 169.4)
Color conversions
- HEX
- #008c6c
- RGB
- rgb(0 140 108)
- HSL
- hsl(166 100% 27%)
- HWB
- hwb(166 0% 45%)
- OKLCH
- oklch(0.569 0.113 169.4)
- OKLab
- oklab(0.569 -0.111 0.021)
- CIE Lab
- lab(51.51 -39.65 7.67)
- LCH
- lch(51.51 40.39 169.1)
- CMYK
- cmyk(100% 0% 23% 45%)
Tints · Shades · Tones
Tints
- 35977A
- 51A388
- 69AE96
- 80BAA4
- 95C5B3
- ABD1C2
- C0DCD1
- D5E8E0
- EAF3EF
Shades
- 00795D
- 00674E
- 005540
- 004332
- 003325
- 002319
- 00140D
- 000704
- 000100
Tones
- 258B6E
- 378A70
- 448972
- 4F8874
- 598776
- 628678
- 6A847A
- 72837C
- 79827E
Color harmonies
Complementary +180°
- 008C6C
Festive Green
- A85981
≈ Guppy Violet
Analogous -30° +30°
- 008C6C
Festive Green
- 528744
≈ The Legend of Green
- 00888D
≈ Well Blue
Triadic +120° +240°
- 008C6C
Festive Green
- 766AB5
≈ Clear Mauve
- AC6135
≈ Corn Snake
Split-complementary +150° +210°
- 008C6C
Festive Green
- 9460A1
≈ Empire Violet
- B0595C
≈ Alsike Clover Red
Tetradic +90° +180° +270°
- 008C6C
Festive Green
- 4D77B9
≈ Diva Violet
- A85981
≈ Guppy Violet
- 9A6E10
≈ Chamois Yellow
Contrast & accessibility
Ag
FailOn white
WCAG 4.22:1 · APCA Lc 69
Ag
AAOn black
WCAG 4.96:1 · APCA Lc 33
Best text color: #000000
WCAG 4.96:1 (AA) · APCA Lc 33
Contrast pairs
Code snippets
CSS
:root {
--festive-green: #008c6c;
--festive-green-rgb: 0 140 108;
--festive-green-oklch: oklch(0.569 0.113 169.4);
}
.element {
color: var(--festive-green);
background-color: hsl(166 100% 27%);
border-color: oklch(0.569 0.113 169.4);
}Tailwind CSS v4
@theme {
--color-festive-green: #008c6c;
--color-festive-green-50: #d6fff1;
--color-festive-green-100: #c3f5e3;
--color-festive-green-200: #a2e5ce;
--color-festive-green-300: #77cbb0;
--color-festive-green-400: #4db493;
--color-festive-green-500: #009e7a;
--color-festive-green-600: #098567;
--color-festive-green-700: #0a6b52;
--color-festive-green-800: #084f3a;
--color-festive-green-900: #063728;
--color-festive-green-950: #002116;
}SCSS
$festive-green: #008c6c;
$festive-green-rgb: 0, 140, 108;
$festive-green-light: mix(#fff, $festive-green, 20%);
$festive-green-dark: mix(#000, $festive-green, 20%);
.element {
color: $festive-green;
box-shadow: 0 0 0 2px rgba($festive-green, 0.35);
}