Named color · #30A299
Sea Kale
Sea Kale is #30A299: rgb(48 162 153), hsl(175 54% 41%), oklch(0.648 0.1 187.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Sea Kale color name →
#30A299
oklch(0.648 0.1 187.3)
Color conversions
- HEX
- #30a299
- RGB
- rgb(48 162 153)
- HSL
- hsl(175 54% 41%)
- HWB
- hwb(175 19% 36%)
- OKLCH
- oklch(0.648 0.1 187.3)
- OKLab
- oklab(0.648 -0.099 -0.013)
- CIE Lab
- lab(60.33 -34.21 -5.01)
- LCH
- lch(60.33 34.58 188.3)
- CMYK
- cmyk(70% 0% 6% 36%)
Tints · Shades · Tones
Tints
- 4DABA3
- 64B5AD
- 7ABEB7
- 8EC7C1
- A1D0CB
- B4DAD5
- C7E3DF
- DAECEA
- ECF6F4
Shades
- 288C84
- 217770
- 1A635D
- 134F4A
- 0C3C38
- 062A27
- 031917
- 010A08
- 000101
Tones
- 3F9F96
- 4B9B94
- 549891
- 5D958F
- 64918C
- 6B8E8A
- 718B87
- 768785
- 7B8482
Color harmonies
Complementary +180°
- 30A299
Sea Kale
- C27484
≈ Briar Rose
Analogous -30° +30°
- 30A299
Sea Kale
- 55A176
≈ Advertising Green
- 349DB6
≈ Sports Blue
Triadic +120° +240°
- 30A299
Sea Kale
- 9F7EBE
≈ Lush Lilac
- B78247
≈ Condiment
Split-complementary +150° +210°
- 30A299
Sea Kale
- B676A4
≈ Eccentric Magenta
- C37862
≈ Pinata
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.10:1 · APCA Lc 58
Ag
AAOn black
WCAG 6.75:1 · APCA Lc 44
Best text color: #000000
WCAG 6.75:1 (AA) · APCA Lc 44
Contrast pairs
Code snippets
CSS
:root {
--sea-kale: #30a299;
--sea-kale-rgb: 48 162 153;
--sea-kale-oklch: oklch(0.648 0.1 187.3);
}
.element {
color: var(--sea-kale);
background-color: hsl(175 54% 41%);
border-color: oklch(0.648 0.1 187.3);
}Tailwind CSS v4
@theme {
--color-sea-kale: #30a299;
--color-sea-kale-50: #d6fffb;
--color-sea-kale-100: #c3f3ef;
--color-sea-kale-200: #a3e3dd;
--color-sea-kale-300: #78c8c2;
--color-sea-kale-400: #4cb2a9;
--color-sea-kale-500: #009b92;
--color-sea-kale-600: #05837b;
--color-sea-kale-700: #086963;
--color-sea-kale-800: #054d47;
--color-sea-kale-900: #043631;
--color-sea-kale-950: #00211d;
}SCSS
$sea-kale: #30a299;
$sea-kale-rgb: 48, 162, 153;
$sea-kale-light: mix(#fff, $sea-kale, 20%);
$sea-kale-dark: mix(#000, $sea-kale, 20%);
.element {
color: $sea-kale;
box-shadow: 0 0 0 2px rgba($sea-kale, 0.35);
}