Nazwany kolor · #006663
Peacock Pride
Peacock Pride to #006663: rgb(0 102 99), hsl(178 100% 20%), oklch(0.461 0.079 191.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Peacock Pride color name →
#006663
oklch(0.461 0.079 191.2)
Konwersje koloru
- HEX
- #006663
- RGB
- rgb(0 102 99)
- HSL
- hsl(178 100% 20%)
- HWB
- hwb(178 0% 60%)
- OKLCH
- oklch(0.461 0.079 191.2)
- OKLab
- oklab(0.461 -0.078 -0.015)
- CIE Lab
- lab(38.34 -26.63 -5.94)
- LCH
- lch(38.34 27.29 192.6)
- CMYK
- cmyk(100% 0% 3% 60%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 2C7471
- 468380
- 5E928F
- 75A19E
- 8CB0AE
- A2C0BE
- B9CFCE
- D0DFDE
- E8EFEE
Odcienie ciemniejsze
- 005855
- 004A47
- 003C3A
- 002F2E
- 002321
- 001716
- 000C0B
- 000403
- 000000
Tony
- 1E6966
- 2E6C69
- 3B6E6C
- 46716E
- 517471
- 5B7674
- 647977
- 6E7B7A
- 777E7D
Harmonie kolorów
Komplementarna +180°
- 006663
Peacock Pride
- 7E454D
≈ Dark Strawberry
Analogowa -30° +30°
- 006663
Peacock Pride
- 28664A
≈ Brunswick
- 116277
≈ Blue Enchantment
Triada +120° +240°
- 006663
Peacock Pride
- 674B79
≈ Benevolence
- 745020
≈ Trojan Horse Brown
Komplementarna rozszczepiona +150° +210°
- 006663
Peacock Pride
- 764665
≈ Scintillating Violet
- 7D4834
≈ Tortoise Shell
Tetrada +90° +180° +270°
- 006663
Peacock Pride
- 515284
≈ Purple Navy
- 7E454D
≈ Dark Strawberry
- 62591E
≈ Costa Del Sol
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.81:1 · APCA Lc 83
Ag
FailNa czerni
WCAG 3.08:1 · APCA Lc 19
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.81:1 (AA) · APCA Lc 83
Contrast pairs
Fragmenty kodu
CSS
:root {
--peacock-pride: #006663;
--peacock-pride-rgb: 0 102 99;
--peacock-pride-oklch: oklch(0.461 0.079 191.2);
}
.element {
color: var(--peacock-pride);
background-color: hsl(178 100% 20%);
border-color: oklch(0.461 0.079 191.2);
}Tailwind CSS v4
@theme {
--color-peacock-pride: #006663;
--color-peacock-pride-50: #dcfdfb;
--color-peacock-pride-100: #cbf1ef;
--color-peacock-pride-200: #aee0de;
--color-peacock-pride-300: #87c5c3;
--color-peacock-pride-400: #62aeaa;
--color-peacock-pride-500: #399793;
--color-peacock-pride-600: #32807c;
--color-peacock-pride-700: #286663;
--color-peacock-pride-800: #1c4b48;
--color-peacock-pride-900: #123432;
--color-peacock-pride-950: #04201e;
}SCSS
$peacock-pride: #006663;
$peacock-pride-rgb: 0, 102, 99;
$peacock-pride-light: mix(#fff, $peacock-pride, 20%);
$peacock-pride-dark: mix(#000, $peacock-pride, 20%);
.element {
color: $peacock-pride;
box-shadow: 0 0 0 2px rgba($peacock-pride, 0.35);
}