Cor nomeada · #C3CDE6
Periwinkle Grey
Periwinkle Grey é #C3CDE6: rgb(195 205 230), hsl(223 41% 83%), oklch(0.849 0.037 268.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Periwinkle Grey color name →
#C3CDE6
oklch(0.849 0.037 268.2)
Conversões de cor
- HEX
- #c3cde6
- RGB
- rgb(195 205 230)
- HSL
- hsl(223 41% 83%)
- HWB
- hwb(223 76% 10%)
- OKLCH
- oklch(0.849 0.037 268.2)
- OKLab
- oklab(0.849 -0.001 -0.036)
- CIE Lab
- lab(82.22 0.23 -13.64)
- LCH
- lch(82.22 13.64 271)
- CMYK
- cmyk(15% 11% 0% 10%)
Tons claros · Sombras · Tons
Tons claros
- C9D2E9
- CFD7EB
- D5DCEE
- DBE1F0
- E1E6F3
- E7EBF5
- EDF0F8
- F3F5FA
- F9FAFD
Sombras
- A9B2C8
- 9098AB
- 787E8E
- 606673
- 4A4E59
- 343840
- 202328
- 0E0F13
- 020203
Tons
- BCC5DB
- B5BDD1
- AEB5C6
- A8ADBC
- A1A6B2
- 9A9EA8
- 94969E
- 8D8F94
- 86878A
Harmonias de cor
Complementar +180°
- C3CDE6
Periwinkle Grey
- D7CCB3
≈ Vanderbilt Beach
Análoga -30° +30°
- C3CDE6
Periwinkle Grey
- B8D1E3
≈ Delicate Ice
- D0C9E3
≈ Light Mulberry
Tríade +120° +240°
- C3CDE6
Periwinkle Grey
- E4C5C0
≈ Rose Coloured Glasses
- BED4C0
≈ Garden Statue
Complementar dividida +150° +210°
- C3CDE6
Periwinkle Grey
- E0C8B6
≈ Ellen
- CBD1B6
≈ Sweet Surrender
Tétrade +90° +180° +270°
- C3CDE6
Periwinkle Grey
- E2C4CD
≈ In the Slip
- D7CCB3
≈ Vanderbilt Beach
- B5D6CD
≈ Gemini
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.59:1 · APCA Lc 27
Ag
AAASobre preto
WCAG 13.19:1 · APCA Lc 76
Melhor cor de texto: #000000
WCAG 13.19:1 (AAA) · APCA Lc 76
Contrast pairs
Trechos de código
CSS
:root {
--periwinkle-grey: #c3cde6;
--periwinkle-grey-rgb: 195 205 230;
--periwinkle-grey-oklch: oklch(0.849 0.037 268.2);
}
.element {
color: var(--periwinkle-grey);
background-color: hsl(223 41% 83%);
border-color: oklch(0.849 0.037 268.2);
}Tailwind CSS v4
@theme {
--color-periwinkle-grey: #c3cde6;
--color-periwinkle-grey-50: #f1f5ff;
--color-periwinkle-grey-100: #e3e8f5;
--color-periwinkle-grey-200: #ced4e4;
--color-periwinkle-grey-300: #b0b7cb;
--color-periwinkle-grey-400: #959eb5;
--color-periwinkle-grey-500: #7c869f;
--color-periwinkle-grey-600: #697186;
--color-periwinkle-grey-700: #545b6c;
--color-periwinkle-grey-800: #3c424f;
--color-periwinkle-grey-900: #292e37;
--color-periwinkle-grey-950: #171b22;
}SCSS
$periwinkle-grey: #c3cde6;
$periwinkle-grey-rgb: 195, 205, 230;
$periwinkle-grey-light: mix(#fff, $periwinkle-grey, 20%);
$periwinkle-grey-dark: mix(#000, $periwinkle-grey, 20%);
.element {
color: $periwinkle-grey;
box-shadow: 0 0 0 2px rgba($periwinkle-grey, 0.35);
}