Benoemde kleur · #678F8A
Oil Blue
Oil Blue is #678F8A: rgb(103 143 138), hsl(173 16% 48%), oklch(0.619 0.045 186.5). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Teal mean? → · Oil Blue color name →
#678F8A
oklch(0.619 0.045 186.5)
Kleurconversies
- HEX
- #678f8a
- RGB
- rgb(103 143 138)
- HSL
- hsl(173 16% 48%)
- HWB
- hwb(173 40% 44%)
- OKLCH
- oklch(0.619 0.045 186.5)
- OKLab
- oklab(0.619 -0.045 -0.005)
- CIE Lab
- lab(56.34 -15.19 -2.04)
- LCH
- lch(56.34 15.33 187.6)
- CMYK
- cmyk(28% 0% 3% 44%)
Tinten · Schaduwen · Tonen
Tinten
- 769A95
- 85A5A0
- 93B0AC
- A2BBB7
- B1C6C3
- C1D1CF
- D0DCDB
- E0E8E7
- EFF3F3
Schaduwen
- 597C77
- 4B6965
- 3D5753
- 304542
- 233432
- 172422
- 0C1514
- 040707
- 000101
Tonen
- 6A8E89
- 6D8C88
- 6F8B87
- 728986
- 758885
- 778684
- 798583
- 7C8382
- 7E8281
Kleurharmonieën
Complementair +180°
- 678F8A
Oil Blue
- 9E7B81
≈ Mulberry Wine
Analoog -30° +30°
- 678F8A
Oil Blue
- 708E7B
≈ Ivy Wreath
- 678D97
≈ Oarsman Blue
Triadisch +120° +240°
- 678F8A
Oil Blue
- 8D7F9C
≈ Wildflower
- 998169
≈ Chocolate Moment
Gesplitst complementair +150° +210°
- 678F8A
Oil Blue
- 987C90
≈ Mountbatten Pink
- 9F7D73
≈ Wild Hemp
Tetradisch +90° +180° +270°
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 3.57:1 · APCA Lc 63
Ag
AAOp zwart
WCAG 5.87:1 · APCA Lc 38
Beste tekstkleur: #000000
WCAG 5.87:1 (AA) · APCA Lc 38
Contrast pairs
Codefragmenten
CSS
:root {
--oil-blue: #678f8a;
--oil-blue-rgb: 103 143 138;
--oil-blue-oklch: oklch(0.619 0.045 186.5);
}
.element {
color: var(--oil-blue);
background-color: hsl(173 16% 48%);
border-color: oklch(0.619 0.045 186.5);
}Tailwind CSS v4
@theme {
--color-oil-blue: #678f8a;
--color-oil-blue-50: #e8faf7;
--color-oil-blue-100: #d8edeb;
--color-oil-blue-200: #c0dbd8;
--color-oil-blue-300: #9ebfbc;
--color-oil-blue-400: #81a7a2;
--color-oil-blue-500: #64908b;
--color-oil-blue-600: #557a75;
--color-oil-blue-700: #44625e;
--color-oil-blue-800: #314844;
--color-oil-blue-900: #21322f;
--color-oil-blue-950: #101e1c;
}SCSS
$oil-blue: #678f8a;
$oil-blue-rgb: 103, 143, 138;
$oil-blue-light: mix(#fff, $oil-blue, 20%);
$oil-blue-dark: mix(#000, $oil-blue, 20%);
.element {
color: $oil-blue;
box-shadow: 0 0 0 2px rgba($oil-blue, 0.35);
}