Named color · #AFE4E2
Timeless Seafoam
Timeless Seafoam is #AFE4E2: rgb(175 228 226), hsl(178 50% 79%), oklch(0.882 0.054 193.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Timeless Seafoam color name →
#AFE4E2
oklch(0.882 0.054 193.3)
Color conversions
- HEX
- #afe4e2
- RGB
- rgb(175 228 226)
- HSL
- hsl(178 50% 79%)
- HWB
- hwb(178 69% 11%)
- OKLCH
- oklch(0.882 0.054 193.3)
- OKLab
- oklab(0.882 -0.053 -0.013)
- CIE Lab
- lab(86.88 -17.89 -4.87)
- LCH
- lch(86.88 18.54 195.2)
- CMYK
- cmyk(23% 0% 1% 11%)
Tints · Shades · Tones
Tints
- B7E7E5
- C0E9E8
- C8ECEB
- D0EFEE
- D8F2F0
- E0F4F3
- E8F7F6
- EFFAF9
- F7FCFC
Shades
- 98C6C4
- 81A9A8
- 6B8D8C
- 567271
- 415857
- 2E3F3E
- 1C2827
- 0B1212
- 010303
Tones
- ABDAD8
- A6CFCE
- A2C5C4
- 9DBBBA
- 98B1B0
- 94A7A6
- 8F9D9C
- 8A9393
- 858A89
Color harmonies
Complementary +180°
- AFE4E2
Timeless Seafoam
- FACACE
≈ Rosey Afterglow
Analogous -30° +30°
- AFE4E2
Timeless Seafoam
- B8E4CE
≈ Crystal Rapids
- B2E1F3
≈ Azure Sky
Triadic +120° +240°
- AFE4E2
Timeless Seafoam
- E5CEF2
≈ Mousse aux Pruneaux
- EED3B1
≈ Nashi Pear Beige
Split-complementary +150° +210°
- AFE4E2
Timeless Seafoam
- F3CAE1
≈ Laelia Pink
- F8CDBC
≈ Biscuit Cream
Tetradic +90° +180° +270°
- AFE4E2
Timeless Seafoam
- D2D4FC
≈ Pale Phthalo Blue
- FACACE
≈ Rosey Afterglow
- DEDAB1
≈ Beige Green
Contrast & accessibility
Ag
FailOn white
WCAG 1.39:1 · APCA Lc 19
Ag
AAAOn black
WCAG 15.01:1 · APCA Lc 84
Best text color: #000000
WCAG 15.01:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--timeless-seafoam: #afe4e2;
--timeless-seafoam-rgb: 175 228 226;
--timeless-seafoam-oklch: oklch(0.882 0.054 193.3);
}
.element {
color: var(--timeless-seafoam);
background-color: hsl(178 50% 79%);
border-color: oklch(0.882 0.054 193.3);
}Tailwind CSS v4
@theme {
--color-timeless-seafoam: #afe4e2;
--color-timeless-seafoam-50: #e4fafa;
--color-timeless-seafoam-100: #d4eeed;
--color-timeless-seafoam-200: #badcdb;
--color-timeless-seafoam-300: #98c1c0;
--color-timeless-seafoam-400: #79a9a7;
--color-timeless-seafoam-500: #599290;
--color-timeless-seafoam-600: #4c7b7a;
--color-timeless-seafoam-700: #3d6362;
--color-timeless-seafoam-800: #2b4947;
--color-timeless-seafoam-900: #1d3231;
--color-timeless-seafoam-950: #0d1e1d;
}SCSS
$timeless-seafoam: #afe4e2;
$timeless-seafoam-rgb: 175, 228, 226;
$timeless-seafoam-light: mix(#fff, $timeless-seafoam, 20%);
$timeless-seafoam-dark: mix(#000, $timeless-seafoam, 20%);
.element {
color: $timeless-seafoam;
box-shadow: 0 0 0 2px rgba($timeless-seafoam, 0.35);
}