En yakın adlandırılmış renk · #4AD0BF
#4AD0BF
En yakın adlandırılmış renk: Peppy Peacock
#4AD0BF (rgb(74 208 191), hsl(172 59% 55%), oklch(0.781 0.118 183.3)) en çok Peppy Peacock adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#4AD0BF
oklch(0.781 0.118 183.3)
Renk dönüşümleri
- HEX
- #4ad0bf
- RGB
- rgb(74 208 191)
- HSL
- hsl(172 59% 55%)
- HWB
- hwb(172 29% 18%)
- OKLCH
- oklch(0.781 0.118 183.3)
- OKLab
- oklab(0.781 -0.118 -0.007)
- CIE Lab
- lab(76.01 -40.83 -2.84)
- LCH
- lch(76.01 40.93 184)
- CMYK
- cmyk(64% 0% 8% 18%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 64D5C5
- 79DACC
- 8DDFD2
- 9FE3D8
- B0E8DF
- C0EDE5
- D0F2EB
- E0F6F2
- F0FBF8
Koyu tonlar
- 3FB5A6
- 359A8D
- 2A8075
- 20675E
- 174F48
- 0E3933
- 06231F
- 02100D
- 000202
Gri tonlar
- 56C8B9
- 5FC0B2
- 66B8AC
- 6CB0A5
- 71A89F
- 76A099
- 799892
- 7C908C
- 7E8886
Renk uyumları
Tamamlayıcı +180°
- 4AD0BF
Peppy Peacock
- F697B0
≈ Flower Girl
Analog -30° +30°
- 4AD0BF
Peppy Peacock
- 78CE94
≈ Jocose Jade
- 46CBE5
≈ Picnic Day Sky
Üçlü +120° +240°
- 4AD0BF
Peppy Peacock
- C7A5F6
≈ Lavender Cream
- EDA664
≈ Adventure Orange
Bölünmüş tamamlayıcı +150° +210°
- 4AD0BF
Peppy Peacock
- E59BD8
≈ Damson Plum
- F99B86
≈ Shān Hú Hóng Coral
Dörtlü +90° +180° +270°
- 4AD0BF
Peppy Peacock
- A0B3FF
≈ Wondrous Wisteria
- F697B0
≈ Flower Girl
- D1B658
≈ Warm Woollen
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.89:1 · APCA Lc 36
Ag
AAASiyah üzerinde
WCAG 11.06:1 · APCA Lc 67
En iyi metin rengi: #000000
WCAG 11.06:1 (AAA) · APCA Lc 67
Contrast pairs
Kod parçacıkları
CSS
:root {
--peppy-peacock: #4ad0bf;
--peppy-peacock-rgb: 74 208 191;
--peppy-peacock-oklch: oklch(0.781 0.118 183.3);
}
.element {
color: var(--peppy-peacock);
background-color: hsl(172 59% 55%);
border-color: oklch(0.781 0.118 183.3);
}Tailwind CSS v4
@theme {
--color-peppy-peacock: #4ad0bf;
--color-peppy-peacock-50: #d0fffa;
--color-peppy-peacock-100: #bcf5ed;
--color-peppy-peacock-200: #99e5db;
--color-peppy-peacock-300: #69cbbf;
--color-peppy-peacock-400: #33b5a5;
--color-peppy-peacock-500: #009e8e;
--color-peppy-peacock-600: #008678;
--color-peppy-peacock-700: #006b60;
--color-peppy-peacock-800: #004f45;
--color-peppy-peacock-900: #003730;
--color-peppy-peacock-950: #00221c;
}SCSS
$peppy-peacock: #4ad0bf;
$peppy-peacock-rgb: 74, 208, 191;
$peppy-peacock-light: mix(#fff, $peppy-peacock, 20%);
$peppy-peacock-dark: mix(#000, $peppy-peacock, 20%);
.element {
color: $peppy-peacock;
box-shadow: 0 0 0 2px rgba($peppy-peacock, 0.35);
}