Cor nomeada · #FFBBEE
Pink Quartz
Pink Quartz é #FFBBEE: rgb(255 187 238), hsl(315 100% 87%), oklch(0.87 0.101 335.7). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Pink mean? → · Pink Quartz color name →
#FFBBEE
oklch(0.87 0.101 335.7)
Conversões de cor
- HEX
- #ffbbee
- RGB
- rgb(255 187 238)
- HSL
- hsl(315 100% 87%)
- HWB
- hwb(315 73% 0%)
- OKLCH
- oklch(0.87 0.101 335.7)
- OKLab
- oklab(0.87 0.092 -0.042)
- CIE Lab
- lab(83.47 31.02 -15.34)
- LCH
- lch(83.47 34.6 333.7)
- CMYK
- cmyk(0% 27% 7% 0%)
Tons claros · Sombras · Tons
Tons claros
- FFC2F0
- FFC9F2
- FFD0F3
- FFD7F5
- FFDDF7
- FFE4F8
- FFEBFA
- FFF2FC
- FFF8FD
Sombras
- DEA2CF
- BE8AB1
- 9E7393
- 805C77
- 63465C
- 483242
- 2E1F2A
- 160D14
- 030203
Tons
- F2B5E3
- E5AFD7
- D8A9CC
- CBA3C1
- BE9EB6
- B298AB
- A592A0
- 998C95
- 8C868A
Harmonias de cor
Complementar +180°
- FFBBEE
Pink Quartz
- 9CE9B8
≈ Teal Deer
Análoga -30° +30°
- FFBBEE
Pink Quartz
- E1C7FF
≈ Foggy Heath
- FFC1CD
≈ Pink
Tríade +120° +240°
- FFBBEE
Pink Quartz
- E8D485
≈ Paved With Gold
- 7FE5FE
≈ Tranquil Pool
Complementar dividida +150° +210°
- FFBBEE
Pink Quartz
- C4E197
≈ Shadow Lime
- 7FEADE
≈ Blue Crystal Landscape
Tétrade +90° +180° +270°
- FFBBEE
Pink Quartz
- FFC892
≈ Peachy Breezes
- 9CE9B8
≈ Teal Deer
- B0DAFF
≈ Droplet
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.54:1 · APCA Lc 25
Ag
AAASobre preto
WCAG 13.59:1 · APCA Lc 78
Melhor cor de texto: #000000
WCAG 13.59:1 (AAA) · APCA Lc 78
Contrast pairs
Trechos de código
CSS
:root {
--pink-quartz: #ffbbee;
--pink-quartz-rgb: 255 187 238;
--pink-quartz-oklch: oklch(0.87 0.101 335.7);
}
.element {
color: var(--pink-quartz);
background-color: hsl(315 100% 87%);
border-color: oklch(0.87 0.101 335.7);
}Tailwind CSS v4
@theme {
--color-pink-quartz: #ffbbee;
--color-pink-quartz-50: #ffebff;
--color-pink-quartz-100: #ffdcf4;
--color-pink-quartz-200: #f2c4e4;
--color-pink-quartz-300: #daa4ca;
--color-pink-quartz-400: #c487b6;
--color-pink-quartz-500: #b06ba0;
--color-pink-quartz-600: #945b87;
--color-pink-quartz-700: #77496c;
--color-pink-quartz-800: #573451;
--color-pink-quartz-900: #3d2438;
--color-pink-quartz-950: #261223;
}SCSS
$pink-quartz: #ffbbee;
$pink-quartz-rgb: 255, 187, 238;
$pink-quartz-light: mix(#fff, $pink-quartz, 20%);
$pink-quartz-dark: mix(#000, $pink-quartz, 20%);
.element {
color: $pink-quartz;
box-shadow: 0 0 0 2px rgba($pink-quartz, 0.35);
}