Benoemde kleur · #018F6B
Sea Swell
Sea Swell is #018F6B: rgb(1 143 107), hsl(165 99% 28%), oklch(0.577 0.118 167.3). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Green mean? → · Sea Swell color name →
#018F6B
oklch(0.577 0.118 167.3)
Kleurconversies
- HEX
- #018f6b
- RGB
- rgb(1 143 107)
- HSL
- hsl(165 99% 28%)
- HWB
- hwb(165 0% 44%)
- OKLCH
- oklch(0.577 0.118 167.3)
- OKLab
- oklab(0.577 -0.115 0.026)
- CIE Lab
- lab(52.5 -40.88 9.62)
- LCH
- lch(52.5 42 166.8)
- CMYK
- cmyk(99% 0% 25% 44%)
Tinten · Schaduwen · Tonen
Tinten
- 369A79
- 52A587
- 6AB095
- 80BCA4
- 96C7B2
- ABD2C1
- C0DDD0
- D5E8E0
- EAF4EF
Schaduwen
- 017C5C
- 01694E
- 00573F
- 004532
- 003425
- 002418
- 00150D
- 000704
- 000100
Tonen
- 268E6D
- 388D6F
- 458B71
- 508A74
- 5A8876
- 628778
- 6A857A
- 72847C
- 79827E
Kleurharmonieën
Complementair +180°
- 018F6B
Sea Swell
- AB5A86
≈ Guppy Violet
Analoog -30° +30°
- 018F6B
Sea Swell
- 568941
≈ The Legend of Green
- 008B8E
≈ Duvall
Triadisch +120° +240°
- 018F6B
Sea Swell
- 766DBB
≈ Purple Toolbox
- B16137
≈ Fudgesicle
Gesplitst complementair +150° +210°
- 018F6B
Sea Swell
- 9662A7
≈ Empire Violet
- B45A60
≈ Pink Flame
Tetradisch +90° +180° +270°
- 018F6B
Sea Swell
- 4A7ABE
≈ Parkwater
- AB5A86
≈ Guppy Violet
- A06F0B
≈ Golden Hind
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 4.08:1 · APCA Lc 67
Ag
AAOp zwart
WCAG 5.14:1 · APCA Lc 34
Beste tekstkleur: #000000
WCAG 5.14:1 (AA) · APCA Lc 34
Contrast pairs
Codefragmenten
CSS
:root {
--sea-swell: #018f6b;
--sea-swell-rgb: 1 143 107;
--sea-swell-oklch: oklch(0.577 0.118 167.3);
}
.element {
color: var(--sea-swell);
background-color: hsl(165 99% 28%);
border-color: oklch(0.577 0.118 167.3);
}Tailwind CSS v4
@theme {
--color-sea-swell: #018f6b;
--color-sea-swell-50: #d5fff0;
--color-sea-swell-100: #c2f5e1;
--color-sea-swell-200: #a2e5cc;
--color-sea-swell-300: #76cbad;
--color-sea-swell-400: #4cb590;
--color-sea-swell-500: #009e76;
--color-sea-swell-600: #038664;
--color-sea-swell-700: #066b50;
--color-sea-swell-800: #074f38;
--color-sea-swell-900: #053726;
--color-sea-swell-950: #002215;
}SCSS
$sea-swell: #018f6b;
$sea-swell-rgb: 1, 143, 107;
$sea-swell-light: mix(#fff, $sea-swell, 20%);
$sea-swell-dark: mix(#000, $sea-swell, 20%);
.element {
color: $sea-swell;
box-shadow: 0 0 0 2px rgba($sea-swell, 0.35);
}