Benannte Farbe · #54C3C1
Port Hope
Port Hope ist #54C3C1: rgb(84 195 193), hsl(179 48% 55%), oklch(0.753 0.101 193.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Teal mean? → · Port Hope color name →
#54C3C1
oklch(0.753 0.101 193.6)
Farbumrechnungen
- HEX
- #54c3c1
- RGB
- rgb(84 195 193)
- HSL
- hsl(179 48% 55%)
- HWB
- hwb(179 33% 24%)
- OKLCH
- oklch(0.753 0.101 193.6)
- OKLab
- oklab(0.753 -0.098 -0.024)
- CIE Lab
- lab(72.45 -33.23 -9.08)
- LCH
- lch(72.45 34.44 195.3)
- CMYK
- cmyk(57% 0% 1% 24%)
Tints · Shades · Tones
Tints
- 6AC9C7
- 7DCFCD
- 8FD5D3
- A0DBDA
- B1E1E0
- C1E7E6
- D1EDEC
- E0F3F2
- F0F9F9
Shades
- 48A9A7
- 3C908F
- 317877
- 26605F
- 1B4A49
- 113434
- 082020
- 020E0E
- 000202
Tones
- 5CBCBA
- 63B6B4
- 69AFAD
- 6EA8A6
- 73A1A0
- 769B99
- 799493
- 7C8D8D
- 7E8786
Farbharmonien
Komplementär +180°
- 54C3C1
Port Hope
- E7949C
≈ Marker Pink
Analog -30° +30°
- 54C3C1
Port Hope
- 6EC39D
≈ Gem Silica
- 5FBDDE
≈ Sea Capture
Triadisch +120° +240°
- 54C3C1
Port Hope
- C69CDC
≈ Silver Rust
- D5A564
≈ Ungor Beige
Geteilt komplementär +150° +210°
- 54C3C1
Port Hope
- DC95BF
≈ Firm Pink
- E59A7A
≈ Mozzarella Covered Chorizo
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.10:1 · APCA Lc 41
Ag
AAAAuf Schwarz
WCAG 9.95:1 · APCA Lc 61
Beste Textfarbe: #000000
WCAG 9.95:1 (AAA) · APCA Lc 61
Contrast pairs
Code-Snippets
CSS
:root {
--port-hope: #54c3c1;
--port-hope-rgb: 84 195 193;
--port-hope-oklch: oklch(0.753 0.101 193.6);
}
.element {
color: var(--port-hope);
background-color: hsl(179 48% 55%);
border-color: oklch(0.753 0.101 193.6);
}Tailwind CSS v4
@theme {
--color-port-hope: #54c3c1;
--color-port-hope-50: #d5fffe;
--color-port-hope-100: #c2f3f3;
--color-port-hope-200: #a1e2e2;
--color-port-hope-300: #76c8c8;
--color-port-hope-400: #48b1af;
--color-port-hope-500: #009a99;
--color-port-hope-600: #008381;
--color-port-hope-700: #006968;
--color-port-hope-800: #004d4b;
--color-port-hope-900: #023634;
--color-port-hope-950: #002120;
}SCSS
$port-hope: #54c3c1;
$port-hope-rgb: 84, 195, 193;
$port-hope-light: mix(#fff, $port-hope, 20%);
$port-hope-dark: mix(#000, $port-hope, 20%);
.element {
color: $port-hope;
box-shadow: 0 0 0 2px rgba($port-hope, 0.35);
}