Benannte Farbe · #57A9D4
Hoeth Blue
Hoeth Blue ist #57A9D4: rgb(87 169 212), hsl(201 59% 59%), oklch(0.7 0.102 233.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Hoeth Blue color name →
#57A9D4
oklch(0.7 0.102 233.7)
Farbumrechnungen
- HEX
- #57a9d4
- RGB
- rgb(87 169 212)
- HSL
- hsl(201 59% 59%)
- HWB
- hwb(201 34% 17%)
- OKLCH
- oklch(0.7 0.102 233.7)
- OKLab
- oklab(0.7 -0.06 -0.082)
- CIE Lab
- lab(65.4 -16.42 -30.02)
- LCH
- lch(65.4 34.22 241.3)
- CMYK
- cmyk(59% 20% 0% 17%)
Tints · Shades · Tones
Tints
- 6AB2D9
- 7CBADD
- 8DC3E2
- 9ECCE6
- AED4EA
- BEDDEF
- CEE5F3
- DFEEF7
- EFF6FB
Shades
- 4B92B8
- 3E7C9D
- 336783
- 275369
- 1C3F51
- 122C3A
- 081B24
- 030A10
- 000102
Tones
- 5DA5CC
- 63A1C3
- 689DBB
- 6D99B2
- 7195AA
- 7491A1
- 788D99
- 7B8991
- 7D8488
Farbharmonien
Komplementär +180°
- 57A9D4
Hoeth Blue
- D08D60
≈ Grounded
Analog -30° +30°
- 57A9D4
Hoeth Blue
- 3EB1BB
≈ Thalassa
- 7E9EDE
≈ Portage
Triadisch +120° +240°
- 57A9D4
Hoeth Blue
- D084A3
≈ Heirloom Rose
- 9EA658
≈ Springtide Melodies
Geteilt komplementär +150° +210°
- 57A9D4
Hoeth Blue
- D78580
≈ Pink Damask
- BD994F
≈ Tangy Green
Tetradisch +90° +180° +270°
- 57A9D4
Hoeth Blue
- BE89C3
≈ Dragonflies
- D08D60
≈ Grounded
- 77AF75
≈ Alfalfa Bug
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.61:1 · APCA Lc 51
Ag
AAAAuf Schwarz
WCAG 8.03:1 · APCA Lc 51
Beste Textfarbe: #000000
WCAG 8.03:1 (AAA) · APCA Lc 51
Contrast pairs
Code-Snippets
CSS
:root {
--hoeth-blue: #57a9d4;
--hoeth-blue-rgb: 87 169 212;
--hoeth-blue-oklch: oklch(0.7 0.102 233.7);
}
.element {
color: var(--hoeth-blue);
background-color: hsl(201 59% 59%);
border-color: oklch(0.7 0.102 233.7);
}Tailwind CSS v4
@theme {
--color-hoeth-blue: #57a9d4;
--color-hoeth-blue-50: #dafbff;
--color-hoeth-blue-100: #c8eeff;
--color-hoeth-blue-200: #abdcfa;
--color-hoeth-blue-300: #83c0e5;
--color-hoeth-blue-400: #5ca8d1;
--color-hoeth-blue-500: #2f91bf;
--color-hoeth-blue-600: #2a7aa1;
--color-hoeth-blue-700: #226281;
--color-hoeth-blue-800: #14485f;
--color-hoeth-blue-900: #0d3243;
--color-hoeth-blue-950: #011e2b;
}SCSS
$hoeth-blue: #57a9d4;
$hoeth-blue-rgb: 87, 169, 212;
$hoeth-blue-light: mix(#fff, $hoeth-blue, 20%);
$hoeth-blue-dark: mix(#000, $hoeth-blue, 20%);
.element {
color: $hoeth-blue;
box-shadow: 0 0 0 2px rgba($hoeth-blue, 0.35);
}