Cor nomeada · #D1ABB5
Sugarplum Dance
Sugarplum Dance é #D1ABB5: rgb(209 171 181), hsl(344 29% 75%), oklch(0.778 0.046 0.6). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Red mean? → · Sugarplum Dance color name →
#D1ABB5
oklch(0.778 0.046 0.6)
Conversões de cor
- HEX
- #d1abb5
- RGB
- rgb(209 171 181)
- HSL
- hsl(344 29% 75%)
- HWB
- hwb(344 67% 18%)
- OKLCH
- oklch(0.778 0.046 0.6)
- OKLab
- oklab(0.778 0.046 0.001)
- CIE Lab
- lab(73.66 15.48 0.36)
- LCH
- lch(73.66 15.48 1.3)
- CMYK
- cmyk(0% 18% 13% 18%)
Tons claros · Sombras · Tons
Tons claros
- D6B3BC
- DABBC3
- DFC4CB
- E4CCD2
- E8D4D9
- EDDDE1
- F2E5E8
- F6EEF0
- FBF6F7
Sombras
- B5949D
- 9B7E86
- 81686F
- 685459
- 504044
- 392D30
- 231B1D
- 100B0C
- 020102
Tons
- C9A7B0
- C1A2AA
- B89EA5
- B09A9F
- A8959A
- A09195
- 988D90
- 90898A
- 888485
Harmonias de cor
Complementar +180°
- D1ABB5
Sugarplum Dance
- 97C1B8
≈ Shadow Green
Análoga -30° +30°
- D1ABB5
Sugarplum Dance
- C9ADC5
≈ Winsome Orchid
- D3ACA5
≈ Rose Smoke
Tríade +120° +240°
- D1ABB5
Sugarplum Dance
- B2BC9B
≈ Pale Spring Morning
- 9DBBD2
≈ Stretch of Water
Complementar dividida +150° +210°
- D1ABB5
Sugarplum Dance
- A2C0A8
≈ Spring Reflection
- 95BFC7
≈ Porcelain Blue
Tétrade +90° +180° +270°
- D1ABB5
Sugarplum Dance
- C2B696
≈ Distant Valley
- 97C1B8
≈ Shadow Green
- ABB6D5
≈ Lilac Sachet
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.05:1 · APCA Lc 40
Ag
AAASobre preto
WCAG 10.20:1 · APCA Lc 62
Melhor cor de texto: #000000
WCAG 10.20:1 (AAA) · APCA Lc 62
Contrast pairs
Trechos de código
CSS
:root {
--sugarplum-dance: #d1abb5;
--sugarplum-dance-rgb: 209 171 181;
--sugarplum-dance-oklch: oklch(0.778 0.046 0.6);
}
.element {
color: var(--sugarplum-dance);
background-color: hsl(344 29% 75%);
border-color: oklch(0.778 0.046 0.6);
}Tailwind CSS v4
@theme {
--color-sugarplum-dance: #d1abb5;
--color-sugarplum-dance-50: #fff0f4;
--color-sugarplum-dance-100: #f6e2e6;
--color-sugarplum-dance-200: #e6cdd2;
--color-sugarplum-dance-300: #cdaeb5;
--color-sugarplum-dance-400: #b7949d;
--color-sugarplum-dance-500: #a17a84;
--color-sugarplum-dance-600: #886770;
--color-sugarplum-dance-700: #6d525a;
--color-sugarplum-dance-800: #503c42;
--color-sugarplum-dance-900: #38292e;
--color-sugarplum-dance-950: #22171a;
}SCSS
$sugarplum-dance: #d1abb5;
$sugarplum-dance-rgb: 209, 171, 181;
$sugarplum-dance-light: mix(#fff, $sugarplum-dance, 20%);
$sugarplum-dance-dark: mix(#000, $sugarplum-dance, 20%);
.element {
color: $sugarplum-dance;
box-shadow: 0 0 0 2px rgba($sugarplum-dance, 0.35);
}