Cor nomeada · #F6EEED
Grannie’s Pearls
Grannie’s Pearls é #F6EEED: rgb(246 238 237), hsl(7 33% 95%), oklch(0.955 0.009 26). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Grannie’s Pearls color name →
#F6EEED
oklch(0.955 0.009 26)
Conversões de cor
- HEX
- #f6eeed
- RGB
- rgb(246 238 237)
- HSL
- hsl(7 33% 95%)
- HWB
- hwb(7 93% 4%)
- OKLCH
- oklch(0.955 0.009 26)
- OKLab
- oklab(0.955 0.008 0.004)
- CIE Lab
- lab(94.71 2.65 1.49)
- LCH
- lch(94.71 3.04 29.3)
- CMYK
- cmyk(0% 3% 4% 4%)
Tons claros · Sombras · Tons
Tons claros
- F7F0EF
- F8F1F1
- F9F3F2
- FAF5F4
- FBF6F6
- FBF8F8
- FCFAFA
- FDFCFB
- FEFDFD
Sombras
- D6CFCE
- B7B1B0
- 989393
- 7B7777
- 5F5C5C
- 454242
- 2C2A2A
- 151414
- 030303
Tons
- EAE2E2
- DDD7D6
- D1CCCB
- C5C1C0
- B9B5B5
- AEAAAA
- A2A09F
- 969595
- 8B8A8A
Harmonias de cor
Complementar +180°
- F6EEED
Grannie’s Pearls
- EAF2F3
≈ Warp Drive
Análoga -30° +30°
- F6EEED
Grannie’s Pearls
- F5EEF0
≈ Line Dried Sheets
- F5EFEB
≈ Furry Lady
Tríade +120° +240°
- F6EEED
Grannie’s Pearls
- EDF2ED
≈ Mineral Spring
- EDF0F6
≈ Powder White
Complementar dividida +150° +210°
- F6EEED
Grannie’s Pearls
- EAF2F0
≈ Warp Drive
- EBF1F5
≈ Powder White
Tétrade +90° +180° +270°
- F6EEED
Grannie’s Pearls
- F0F1EA
≈ Windmill Wings
- EAF2F3
≈ Warp Drive
- F0EFF6
≈ Alpine Goat
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.14:1 · APCA Lc 0
Ag
AAASobre preto
WCAG 18.37:1 · APCA Lc 98
Melhor cor de texto: #000000
WCAG 18.37:1 (AAA) · APCA Lc 98
Contrast pairs
Trechos de código
CSS
:root {
--grannie-s-pearls: #f6eeed;
--grannie-s-pearls-rgb: 246 238 237;
--grannie-s-pearls-oklch: oklch(0.955 0.009 26);
}
.element {
color: var(--grannie-s-pearls);
background-color: hsl(7 33% 95%);
border-color: oklch(0.955 0.009 26);
}Tailwind CSS v4
@theme {
--color-grannie-s-pearls: #f6eeed;
--color-grannie-s-pearls-50: #f8f4f4;
--color-grannie-s-pearls-100: #ebe7e6;
--color-grannie-s-pearls-200: #d8d3d2;
--color-grannie-s-pearls-300: #bcb6b5;
--color-grannie-s-pearls-400: #a49c9c;
--color-grannie-s-pearls-500: #8c8483;
--color-grannie-s-pearls-600: #76706f;
--color-grannie-s-pearls-700: #5f5959;
--color-grannie-s-pearls-800: #454141;
--color-grannie-s-pearls-900: #302d2d;
--color-grannie-s-pearls-950: #1c1a1a;
}SCSS
$grannie-s-pearls: #f6eeed;
$grannie-s-pearls-rgb: 246, 238, 237;
$grannie-s-pearls-light: mix(#fff, $grannie-s-pearls, 20%);
$grannie-s-pearls-dark: mix(#000, $grannie-s-pearls, 20%);
.element {
color: $grannie-s-pearls;
box-shadow: 0 0 0 2px rgba($grannie-s-pearls, 0.35);
}