Adlandırılmış renk · #04D8B2
Channel Marker Green
Channel Marker Green, #04D8B2: rgb(4 216 178), hsl(169 96% 43%), oklch(0.787 0.15 173.8). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Teal mean? → · Channel Marker Green color name →
#04D8B2
oklch(0.787 0.15 173.8)
Renk dönüşümleri
- HEX
- #04d8b2
- RGB
- rgb(4 216 178)
- HSL
- hsl(169 96% 43%)
- HWB
- hwb(169 2% 15%)
- OKLCH
- oklch(0.787 0.15 173.8)
- OKLab
- oklab(0.787 -0.149 0.016)
- CIE Lab
- lab(77.25 -52.68 5.71)
- LCH
- lch(77.25 52.98 173.8)
- CMYK
- cmyk(98% 0% 18% 15%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 47DCB9
- 66E1C1
- 7FE5C9
- 94E9D0
- A8EDD8
- BAF1E0
- CCF4E7
- DEF8EF
- EEFCF7
Koyu tonlar
- 03BC9A
- 02A083
- 01856D
- 016B57
- 005343
- 003B2F
- 00251D
- 00110C
- 000201
Gri tonlar
- 34CFAD
- 48C6A8
- 56BDA3
- 60B59E
- 69AC99
- 6FA394
- 759A8F
- 79928A
- 7D8985
Renk uyumları
Tamamlayıcı +180°
- 04D8B2
Channel Marker Green
- FF91C0
≈ Cochonnet
Analog -30° +30°
- 04D8B2
Channel Marker Green
- 7AD279
≈ Electric Lettuce
- 00D2E1
≈ Aztec Turquoise
Üçlü +120° +240°
- 04D8B2
Channel Marker Green
- BEAAFF
≈ Winterspring Lilac
- FF9F5C
≈ Orange Spice
Bölünmüş tamamlayıcı +150° +210°
- 04D8B2
Channel Marker Green
- E897F0
≈ Diva Mecha
- FF9993
≈ Lolly
Dörtlü +90° +180° +270°
- 04D8B2
Channel Marker Green
- 96B9FF
≈ Truesky Gloxym
- FF91C0
≈ Cochonnet
- E7B02D
≈ Nanohanacha Gold
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.83:1 · APCA Lc 34
Ag
AAASiyah üzerinde
WCAG 11.47:1 · APCA Lc 69
En iyi metin rengi: #000000
WCAG 11.47:1 (AAA) · APCA Lc 69
Contrast pairs
Kod parçacıkları
CSS
:root {
--channel-marker-green: #04d8b2;
--channel-marker-green-rgb: 4 216 178;
--channel-marker-green-oklch: oklch(0.787 0.15 173.8);
}
.element {
color: var(--channel-marker-green);
background-color: hsl(169 96% 43%);
border-color: oklch(0.787 0.15 173.8);
}Tailwind CSS v4
@theme {
--color-channel-marker-green: #04d8b2;
--color-channel-marker-green-50: #c9fff3;
--color-channel-marker-green-100: #b2f9e6;
--color-channel-marker-green-200: #8bead2;
--color-channel-marker-green-300: #51d0b4;
--color-channel-marker-green-400: #00ba97;
--color-channel-marker-green-500: #00a47e;
--color-channel-marker-green-600: #008b6b;
--color-channel-marker-green-700: #006f55;
--color-channel-marker-green-800: #00523c;
--color-channel-marker-green-900: #003929;
--color-channel-marker-green-950: #002317;
}SCSS
$channel-marker-green: #04d8b2;
$channel-marker-green-rgb: 4, 216, 178;
$channel-marker-green-light: mix(#fff, $channel-marker-green, 20%);
$channel-marker-green-dark: mix(#000, $channel-marker-green, 20%);
.element {
color: $channel-marker-green;
box-shadow: 0 0 0 2px rgba($channel-marker-green, 0.35);
}