Cor nomeada · #DDAACC
Aristocratic Pink
Aristocratic Pink é #DDAACC: rgb(221 170 204), hsl(320 43% 77%), oklch(0.795 0.074 339.1). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Pink mean? → · Aristocratic Pink color name →
#DDAACC
oklch(0.795 0.074 339.1)
Conversões de cor
- HEX
- #ddaacc
- RGB
- rgb(221 170 204)
- HSL
- hsl(320 43% 77%)
- HWB
- hwb(320 67% 13%)
- OKLCH
- oklch(0.795 0.074 339.1)
- OKLab
- oklab(0.795 0.069 -0.027)
- CIE Lab
- lab(75.18 23.27 -9.78)
- LCH
- lch(75.18 25.24 337.2)
- CMYK
- cmyk(0% 23% 8% 13%)
Tons claros · Sombras · Tons
Tons claros
- E1B2D1
- E4BBD6
- E8C3DB
- EBCCE0
- EFD4E5
- F2DDEA
- F6E5F0
- F9EEF5
- FCF6FA
Sombras
- C093B1
- A47D97
- 88687E
- 6E5365
- 553F4E
- 3D2D37
- 261B22
- 110B0F
- 020102
Tons
- D4A6C4
- CAA2BC
- C19DB5
- B799AD
- AE95A5
- A5919E
- 9C8D96
- 92888F
- 898487
Harmonias de cor
Complementar +180°
- DDAACC
Aristocratic Pink
- 93CBAB
≈ Peppermint Spray
Análoga -30° +30°
- DDAACC
Aristocratic Pink
- CAB0E1
≈ Lavender Field Dreamer
- E7A9B2
≈ Perennial Phlox
Tríade +120° +240°
- DDAACC
Aristocratic Pink
- C8BD86
≈ Olive Hint
- 84C8DD
≈ Winter Chime
Complementar dividida +150° +210°
- DDAACC
Aristocratic Pink
- ADC693
≈ Geddy Green
- 82CCC6
≈ Blue Green Gem
Tétrade +90° +180° +270°
- DDAACC
Aristocratic Pink
- DCB488
≈ Butterscotch Sundae
- 93CBAB
≈ Peppermint Spray
- 97C1EA
≈ Salvia Blue
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.96:1 · APCA Lc 38
Ag
AAASobre preto
WCAG 10.69:1 · APCA Lc 65
Melhor cor de texto: #000000
WCAG 10.69:1 (AAA) · APCA Lc 65
Contrast pairs
Trechos de código
CSS
:root {
--aristocratic-pink: #ddaacc;
--aristocratic-pink-rgb: 221 170 204;
--aristocratic-pink-oklch: oklch(0.795 0.074 339.1);
}
.element {
color: var(--aristocratic-pink);
background-color: hsl(320 43% 77%);
border-color: oklch(0.795 0.074 339.1);
}Tailwind CSS v4
@theme {
--color-aristocratic-pink: #ddaacc;
--color-aristocratic-pink-50: #ffedfb;
--color-aristocratic-pink-100: #fadfef;
--color-aristocratic-pink-200: #ebc8de;
--color-aristocratic-pink-300: #d3a9c3;
--color-aristocratic-pink-400: #bd8ead;
--color-aristocratic-pink-500: #a77396;
--color-aristocratic-pink-600: #8d617f;
--color-aristocratic-pink-700: #714e66;
--color-aristocratic-pink-800: #53384c;
--color-aristocratic-pink-900: #3a2735;
--color-aristocratic-pink-950: #241520;
}SCSS
$aristocratic-pink: #ddaacc;
$aristocratic-pink-rgb: 221, 170, 204;
$aristocratic-pink-light: mix(#fff, $aristocratic-pink, 20%);
$aristocratic-pink-dark: mix(#000, $aristocratic-pink, 20%);
.element {
color: $aristocratic-pink;
box-shadow: 0 0 0 2px rgba($aristocratic-pink, 0.35);
}