Benannte Farbe · #33ABB2
Tempo
Tempo ist #33ABB2: rgb(51 171 178), hsl(183 55% 45%), oklch(0.68 0.103 200.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Cyan mean? → · Tempo color name →
#33ABB2
oklch(0.68 0.103 200.8)
Farbumrechnungen
- HEX
- #33abb2
- RGB
- rgb(51 171 178)
- HSL
- hsl(183 55% 45%)
- HWB
- hwb(183 20% 30%)
- OKLCH
- oklch(0.68 0.103 200.8)
- OKLab
- oklab(0.68 -0.096 -0.036)
- CIE Lab
- lab(63.86 -31.92 -13.71)
- LCH
- lch(63.86 34.74 203.2)
- CMYK
- cmyk(71% 4% 0% 30%)
Tints · Shades · Tones
Tints
- 50B3BA
- 68BCC1
- 7DC4C9
- 91CDD0
- A4D5D8
- B6DEE0
- C9E6E8
- DBEEEF
- EDF7F7
Shades
- 2B949A
- 237E83
- 1C686D
- 145457
- 0D4043
- 072D2F
- 031B1D
- 010B0C
- 000101
Tones
- 42A7AD
- 4EA3A8
- 579EA3
- 5F9A9E
- 669699
- 6D9294
- 728D8F
- 77898A
- 7C8485
Farbharmonien
Komplementär +180°
- 33ABB2
Tempo
- D07E7D
≈ Galah
Analog -30° +30°
- 33ABB2
Tempo
- 4BAD90
≈ Hole in One
- 4CA4CC
≈ Blue Grotto
Triadisch +120° +240°
Geteilt komplementär +150° +210°
- 33ABB2
Tempo
- C87DA0
≈ Wild Rose
- CB855C
≈ Shamanic Journey
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.75:1 · APCA Lc 53
Ag
AAAAuf Schwarz
WCAG 7.60:1 · APCA Lc 49
Beste Textfarbe: #000000
WCAG 7.60:1 (AAA) · APCA Lc 49
Contrast pairs
Code-Snippets
CSS
:root {
--tempo: #33abb2;
--tempo-rgb: 51 171 178;
--tempo-oklch: oklch(0.68 0.103 200.8);
}
.element {
color: var(--tempo);
background-color: hsl(183 55% 45%);
border-color: oklch(0.68 0.103 200.8);
}Tailwind CSS v4
@theme {
--color-tempo: #33abb2;
--color-tempo-50: #d4ffff;
--color-tempo-100: #c1f3f7;
--color-tempo-200: #a0e2e8;
--color-tempo-300: #74c7ce;
--color-tempo-400: #44b1b7;
--color-tempo-500: #009aa2;
--color-tempo-600: #008289;
--color-tempo-700: #00686e;
--color-tempo-800: #004d50;
--color-tempo-900: #003537;
--color-tempo-950: #002022;
}SCSS
$tempo: #33abb2;
$tempo-rgb: 51, 171, 178;
$tempo-light: mix(#fff, $tempo, 20%);
$tempo-dark: mix(#000, $tempo, 20%);
.element {
color: $tempo;
box-shadow: 0 0 0 2px rgba($tempo, 0.35);
}