Named color · #1F6954
Celtic Green
Celtic Green is #1F6954: rgb(31 105 84), hsl(163 54% 27%), oklch(0.47 0.08 170.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Celtic Green color name →
#1F6954
oklch(0.47 0.08 170.3)
Color conversions
- HEX
- #1f6954
- RGB
- rgb(31 105 84)
- HSL
- hsl(163 54% 27%)
- HWB
- hwb(163 12% 59%)
- OKLCH
- oklch(0.47 0.08 170.3)
- OKLab
- oklab(0.47 -0.079 0.013)
- CIE Lab
- lab(39.53 -27.77 4.94)
- LCH
- lch(39.53 28.2 169.9)
- CMYK
- cmyk(70% 0% 20% 59%)
Tints · Shades · Tones
Tints
- 3A7764
- 508673
- 669484
- 7CA394
- 91B2A5
- A7C1B7
- BCD0C8
- D2E0DA
- E9EFED
Shades
- 195A48
- 144C3C
- 0F3E31
- 0A3126
- 06241B
- 031811
- 010C08
- 000402
- 000000
Tones
- 2D6B58
- 396E5D
- 437061
- 4D7365
- 56756A
- 5F776E
- 677973
- 707C77
- 787E7B
Color harmonies
Complementary +180°
- 1F6954
Celtic Green
- 7C4761
≈ Princely
Analogous -30° +30°
- 1F6954
Celtic Green
- 41663A
≈ Friendly Fairway
- 00686D
≈ Tahitian Treat
Triadic +120° +240°
- 1F6954
Celtic Green
- 5A5284
≈ Freshly Purpleized
- 7E4D2F
≈ Kinsusutake Brown
Split-complementary +150° +210°
- 1F6954
Celtic Green
- 6F4B76
≈ Hyssop
- 824748
≈ Red Elegance
Tetradic +90° +180° +270°
- 1F6954
Celtic Green
- 405B87
≈ Anchor Point
- 7C4761
≈ Princely
- 72551F
≈ Field Drab
Contrast & accessibility
Ag
AAOn white
WCAG 6.54:1 · APCA Lc 82
Ag
FailOn black
WCAG 3.20:1 · APCA Lc 20
Best text color: #FFFFFF
WCAG 6.54:1 (AA) · APCA Lc 82
Contrast pairs
Code snippets
CSS
:root {
--celtic-green: #1f6954;
--celtic-green-rgb: 31 105 84;
--celtic-green-oklch: oklch(0.47 0.08 170.3);
}
.element {
color: var(--celtic-green);
background-color: hsl(163 54% 27%);
border-color: oklch(0.47 0.08 170.3);
}Tailwind CSS v4
@theme {
--color-celtic-green: #1f6954;
--color-celtic-green-50: #dffdf3;
--color-celtic-green-100: #cef1e5;
--color-celtic-green-200: #b2e0d0;
--color-celtic-green-300: #8dc5b3;
--color-celtic-green-400: #6cae97;
--color-celtic-green-500: #48977e;
--color-celtic-green-600: #3e806b;
--color-celtic-green-700: #316655;
--color-celtic-green-800: #234b3d;
--color-celtic-green-900: #18342a;
--color-celtic-green-950: #082018;
}SCSS
$celtic-green: #1f6954;
$celtic-green-rgb: 31, 105, 84;
$celtic-green-light: mix(#fff, $celtic-green, 20%);
$celtic-green-dark: mix(#000, $celtic-green, 20%);
.element {
color: $celtic-green;
box-shadow: 0 0 0 2px rgba($celtic-green, 0.35);
}