Najbliższy nazwany kolor · #CA85B0
#CA85B0
Najbliższy nazwany kolor: Moonlight Mauve
#CA85B0 (rgb(202 133 176), hsl(323 39% 66%), oklch(0.7 0.101 342.1)) jest najbliższy nazwanemu kolorowi Moonlight Mauve. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#CA85B0
oklch(0.7 0.101 342.1)
Konwersje koloru
- HEX
- #ca85b0
- RGB
- rgb(202 133 176)
- HSL
- hsl(323 39% 66%)
- HWB
- hwb(323 52% 21%)
- OKLCH
- oklch(0.7 0.101 342.1)
- OKLab
- oklab(0.7 0.096 -0.031)
- CIE Lab
- lab(63.83 31.9 -11.35)
- LCH
- lch(63.83 33.86 340.4)
- CMYK
- cmyk(0% 34% 13% 21%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D091B8
- D69DBF
- DBA9C7
- E1B5CF
- E6C1D7
- EBCEDF
- F1DAE7
- F5E6EF
- FAF3F7
Odcienie ciemniejsze
- AF7399
- 956182
- 7C506C
- 644056
- 4D3042
- 37212E
- 22131C
- 0F060B
- 020101
Tony
- C385AB
- BC85A6
- B484A1
- AD849D
- A68398
- 9E8393
- 97828E
- 8F8289
- 888185
Harmonie kolorów
Komplementarna +180°
- CA85B0
Moonlight Mauve
- 5EB28B
≈ Aruba Green
Analogowa -30° +30°
- CA85B0
Moonlight Mauve
- B48CCC
≈ Creeping Bellflower
- D5848E
≈ Mauve Glow
Triada +120° +240°
- CA85B0
Moonlight Mauve
- ABA152
≈ Queen Palm
- 4BACCB
≈ Maximum Blue
Komplementarna rozszczepiona +150° +210°
- CA85B0
Moonlight Mauve
- 87AC69
≈ Celuce
- 40B2AF
≈ Verdigris
Tetrada +90° +180° +270°
- CA85B0
Moonlight Mauve
- C59454
≈ Caramel Crumb
- 5EB28B
≈ Aruba Green
- 6FA2DC
≈ Kindred
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.80:1 · APCA Lc 54
Ag
AAANa czerni
WCAG 7.49:1 · APCA Lc 48
Najlepszy kolor tekstu: #000000
WCAG 7.49:1 (AAA) · APCA Lc 48
Contrast pairs
Fragmenty kodu
CSS
:root {
--moonlight-mauve: #ca85b0;
--moonlight-mauve-rgb: 202 133 176;
--moonlight-mauve-oklch: oklch(0.7 0.101 342.1);
}
.element {
color: var(--moonlight-mauve);
background-color: hsl(323 39% 66%);
border-color: oklch(0.7 0.101 342.1);
}Tailwind CSS v4
@theme {
--color-moonlight-mauve: #ca85b0;
--color-moonlight-mauve-50: #ffeafc;
--color-moonlight-mauve-100: #ffdbf0;
--color-moonlight-mauve-200: #f5c4df;
--color-moonlight-mauve-300: #dda3c4;
--color-moonlight-mauve-400: #c886af;
--color-moonlight-mauve-500: #b36a99;
--color-moonlight-mauve-600: #985a81;
--color-moonlight-mauve-700: #7a4867;
--color-moonlight-mauve-800: #5a344d;
--color-moonlight-mauve-900: #3f2336;
--color-moonlight-mauve-950: #281221;
}SCSS
$moonlight-mauve: #ca85b0;
$moonlight-mauve-rgb: 202, 133, 176;
$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);
}