Cor nomeada · #CFA798
Pink Ginger
Pink Ginger é #CFA798: rgb(207 167 152), hsl(16 36% 70%), oklch(0.76 0.052 41.6). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Red mean? → · Pink Ginger color name →
#CFA798
oklch(0.76 0.052 41.6)
Conversões de cor
- HEX
- #cfa798
- RGB
- rgb(207 167 152)
- HSL
- hsl(16 36% 70%)
- HWB
- hwb(16 60% 19%)
- OKLCH
- oklch(0.76 0.052 41.6)
- OKLab
- oklab(0.76 0.039 0.034)
- CIE Lab
- lab(71.89 13.51 13.63)
- LCH
- lch(71.89 19.19 45.3)
- CMYK
- cmyk(0% 19% 27% 19%)
Tons claros · Sombras · Tons
Tons claros
- D4B0A2
- D9B8AC
- DEC1B6
- E3CAC0
- E8D2CB
- ECDBD5
- F1E4DF
- F6EDEA
- FAF6F4
Sombras
- B49184
- 997B70
- 7F665C
- 67524A
- 4F3E38
- 382C27
- 231A17
- 100A08
- 020101
Tons
- C7A396
- BF9F93
- B79B91
- AF978F
- A7938C
- 9F908A
- 978C87
- 908885
- 888482
Harmonias de cor
Complementar +180°
- CFA798
Pink Ginger
- 8DB9C9
≈ Blue Echo
Análoga -30° +30°
- CFA798
Pink Ginger
- D0A4A9
≈ Pink Cocoa Cupcake
- C6AC8E
≈ Semolina
Tríade +120° +240°
- CFA798
Pink Ginger
- 95BCA7
≈ Lichen
- ABAED2
≈ Lavender Wash
Complementar dividida +150° +210°
- CFA798
Pink Ginger
- 8BBCB9
≈ Lorian
- 9AB4D2
≈ Blue Satin
Tétrade +90° +180° +270°
- CFA798
Pink Ginger
- A5B997
≈ Byakuroku Green
- 8DB9C9
≈ Blue Echo
- BCA8CA
≈ Immortal
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.17:1 · APCA Lc 43
Ag
AAASobre preto
WCAG 9.63:1 · APCA Lc 59
Melhor cor de texto: #000000
WCAG 9.63:1 (AAA) · APCA Lc 59
Contrast pairs
Trechos de código
CSS
:root {
--pink-ginger: #cfa798;
--pink-ginger-rgb: 207 167 152;
--pink-ginger-oklch: oklch(0.76 0.052 41.6);
}
.element {
color: var(--pink-ginger);
background-color: hsl(16 36% 70%);
border-color: oklch(0.76 0.052 41.6);
}Tailwind CSS v4
@theme {
--color-pink-ginger: #cfa798;
--color-pink-ginger-50: #fff1e9;
--color-pink-ginger-100: #f8e3da;
--color-pink-ginger-200: #e9cec3;
--color-pink-ginger-300: #cfb0a2;
--color-pink-ginger-400: #ba9587;
--color-pink-ginger-500: #a57b6b;
--color-pink-ginger-600: #8b685b;
--color-pink-ginger-700: #705349;
--color-pink-ginger-800: #523c35;
--color-pink-ginger-900: #392a24;
--color-pink-ginger-950: #241713;
}SCSS
$pink-ginger: #cfa798;
$pink-ginger-rgb: 207, 167, 152;
$pink-ginger-light: mix(#fff, $pink-ginger, 20%);
$pink-ginger-dark: mix(#000, $pink-ginger, 20%);
.element {
color: $pink-ginger;
box-shadow: 0 0 0 2px rgba($pink-ginger, 0.35);
}