En yakın adlandırılmış renk · #CA86AA
#CA86AA
En yakın adlandırılmış renk: Moonlight Mauve
#CA86AA (rgb(202 134 170), hsl(328 39% 66%), oklch(0.7 0.095 346.8)) en çok Moonlight Mauve 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.
#CA86AA
oklch(0.7 0.095 346.8)
Renk dönüşümleri
- HEX
- #ca86aa
- RGB
- rgb(202 134 170)
- HSL
- hsl(328 39% 66%)
- HWB
- hwb(328 53% 21%)
- OKLCH
- oklch(0.7 0.095 346.8)
- OKLab
- oklab(0.7 0.093 -0.022)
- CIE Lab
- lab(63.89 30.66 -7.87)
- LCH
- lch(63.89 31.66 345.6)
- CMYK
- cmyk(0% 34% 16% 21%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D092B2
- D69EBB
- DBAAC3
- E1B6CB
- E6C2D4
- EBCEDC
- F1DAE5
- F5E6EE
- FAF3F6
Koyu tonlar
- AF7493
- 95627D
- 7C5168
- 644053
- 4D303F
- 37212D
- 22131B
- 0F060B
- 020101
Gri tonlar
- C386A6
- BC85A1
- B4859D
- AD8499
- A68495
- 9E8391
- 97828C
- 8F8288
- 888184
Renk uyumları
Tamamlayıcı +180°
- CA86AA
Moonlight Mauve
- 5EB192
≈ Electra
Analog -30° +30°
- CA86AA
Moonlight Mauve
- B68CC6
≈ Creeping Bellflower
- D38689
≈ Mauve Glow
Üçlü +120° +240°
- CA86AA
Moonlight Mauve
- A5A35A
≈ Rickrack
- 56AACC
≈ Estero Sky
Bölünmüş tamamlayıcı +150° +210°
- CA86AA
Moonlight Mauve
- 82AC71
≈ Sage Garden
- 48B1B2
≈ Crystalsong Blue
Dörtlü +90° +180° +270°
- CA86AA
Moonlight Mauve
- C09757
≈ Amaretto Sour
- 5EB192
≈ Electra
- 78A0D9
≈ Kindred
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.79:1 · APCA Lc 54
Ag
AAASiyah üzerinde
WCAG 7.50:1 · APCA Lc 48
En iyi metin rengi: #000000
WCAG 7.50:1 (AAA) · APCA Lc 48
Contrast pairs
Kod parçacıkları
CSS
:root {
--moonlight-mauve: #ca86aa;
--moonlight-mauve-rgb: 202 134 170;
--moonlight-mauve-oklch: oklch(0.7 0.095 346.8);
}
.element {
color: var(--moonlight-mauve);
background-color: hsl(328 39% 66%);
border-color: oklch(0.7 0.095 346.8);
}Tailwind CSS v4
@theme {
--color-moonlight-mauve: #ca86aa;
--color-moonlight-mauve-50: #ffebfa;
--color-moonlight-mauve-100: #ffdced;
--color-moonlight-mauve-200: #f5c4db;
--color-moonlight-mauve-300: #dda4bf;
--color-moonlight-mauve-400: #c887a9;
--color-moonlight-mauve-500: #b46b93;
--color-moonlight-mauve-600: #985b7c;
--color-moonlight-mauve-700: #7a4963;
--color-moonlight-mauve-800: #5a344a;
--color-moonlight-mauve-900: #3f2433;
--color-moonlight-mauve-950: #28121f;
}SCSS
$moonlight-mauve: #ca86aa;
$moonlight-mauve-rgb: 202, 134, 170;
$moonlight-mauve-light: mix(#fff, $moonlight-mauve, 20%);
$moonlight-mauve-dark: mix(#000, $moonlight-mauve, 20%);
.element {
color: $moonlight-mauve;
box-shadow: 0 0 0 2px rgba($moonlight-mauve, 0.35);
}