Named color · #254E5D
Rugged Teal
Rugged Teal is #254E5D: rgb(37 78 93), hsl(196 43% 25%), oklch(0.401 0.052 224.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Rugged Teal color name →
#254E5D
oklch(0.401 0.052 224.4)
Color conversions
- HEX
- #254e5d
- RGB
- rgb(37 78 93)
- HSL
- hsl(196 43% 25%)
- HWB
- hwb(196 15% 64%)
- OKLCH
- oklch(0.401 0.052 224.4)
- OKLab
- oklab(0.401 -0.037 -0.037)
- CIE Lab
- lab(30.73 -11.22 -13.49)
- LCH
- lch(30.73 17.55 230.2)
- CMYK
- cmyk(60% 16% 0% 64%)
Tints · Shades · Tones
Tints
- 3A5E6C
- 4F6F7B
- 63808B
- 79919B
- 8EA2AB
- A4B4BB
- BAC7CC
- D1D9DD
- E8ECEE
Shades
- 1F4350
- 193843
- 132D37
- 0D232A
- 08191F
- 040F14
- 02070A
- 000203
- 000000
Tones
- 2F5361
- 395864
- 425D68
- 4B626B
- 54676F
- 5D6C72
- 657176
- 6E7679
- 777B7D
Color harmonies
Complementary +180°
- 254E5D
Rugged Teal
- 603F30
≈ Chocolate Escape
Analogous -30° +30°
- 254E5D
Rugged Teal
- 205150
≈ Forbidden Forest
- 344964
≈ Garnet Stone Blue
Triadic +120° +240°
- 254E5D
Rugged Teal
- 5C3C4F
≈ Purple Cort
- 4C4927
≈ Tinny Tin
Split-complementary +150° +210°
- 254E5D
Rugged Teal
- 613C3F
≈ Cuba Brown
- 594427
≈ Beech Brown
Tetradic +90° +180° +270°
- 254E5D
Rugged Teal
- 523F5C
≈ English Violet
- 603F30
≈ Chocolate Escape
- 3C4E31
≈ Nettle Green
Contrast & accessibility
Ag
AAAOn white
WCAG 9.02:1 · APCA Lc 91
Ag
FailOn black
WCAG 2.32:1 · APCA Lc 12
Best text color: #FFFFFF
WCAG 9.02:1 (AAA) · APCA Lc 91
Contrast pairs
Code snippets
CSS
:root {
--rugged-teal: #254e5d;
--rugged-teal-rgb: 37 78 93;
--rugged-teal-oklch: oklch(0.401 0.052 224.4);
}
.element {
color: var(--rugged-teal);
background-color: hsl(196 43% 25%);
border-color: oklch(0.401 0.052 224.4);
}Tailwind CSS v4
@theme {
--color-rugged-teal: #254e5d;
--color-rugged-teal-50: #e6f9ff;
--color-rugged-teal-100: #d7ecf6;
--color-rugged-teal-200: #bed9e6;
--color-rugged-teal-300: #9cbdcc;
--color-rugged-teal-400: #7da6b6;
--color-rugged-teal-500: #5f8ea0;
--color-rugged-teal-600: #517887;
--color-rugged-teal-700: #41606c;
--color-rugged-teal-800: #2e4750;
--color-rugged-teal-900: #1f3137;
--color-rugged-teal-950: #0f1d22;
}SCSS
$rugged-teal: #254e5d;
$rugged-teal-rgb: 37, 78, 93;
$rugged-teal-light: mix(#fff, $rugged-teal, 20%);
$rugged-teal-dark: mix(#000, $rugged-teal, 20%);
.element {
color: $rugged-teal;
box-shadow: 0 0 0 2px rgba($rugged-teal, 0.35);
}