Named color · #C1C6FC
Light Periwinkle
Light Periwinkle is #C1C6FC: rgb(193 198 252), hsl(235 91% 87%), oklch(0.841 0.076 280.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Light Periwinkle color name →
#C1C6FC
oklch(0.841 0.076 280.5)
Color conversions
- HEX
- #c1c6fc
- RGB
- rgb(193 198 252)
- HSL
- hsl(235 91% 87%)
- HWB
- hwb(235 76% 1%)
- OKLCH
- oklch(0.841 0.076 280.5)
- OKLab
- oklab(0.841 0.014 -0.074)
- CIE Lab
- lab(80.88 6.74 -27.34)
- LCH
- lch(80.88 28.16 283.8)
- CMYK
- cmyk(23% 21% 0% 1%)
Tints · Shades · Tones
Tints
- C7CCFD
- CDD1FD
- D3D7FE
- D9DDFE
- DFE3FE
- E6E8FF
- ECEEFF
- F2F4FF
- F9F9FF
Shades
- A7ACDB
- 8F92BB
- 777A9C
- 5F627E
- 494B62
- 343547
- 20212D
- 0E0E16
- 020203
Tones
- BABFEF
- B4B8E2
- ADB1D6
- A6AAC9
- A0A3BD
- 999CB0
- 9395A4
- 8D8E98
- 86878C
Color harmonies
Complementary +180°
- C1C6FC
Light Periwinkle
- D6CD93
≈ Artichoke Mist
Analogous -30° +30°
- C1C6FC
Light Periwinkle
- A6CFFB
≈ Baby Blue
- DABEF0
≈ Beefy Pink
Triadic +120° +240°
- C1C6FC
Light Periwinkle
- F7BBA6
≈ Yahoo
- 9FDBBB
≈ Birthday King
Split-complementary +150° +210°
- C1C6FC
Light Periwinkle
- EBC395
≈ Apple Turnover
- BAD5A2
≈ Apple Cream
Tetradic +90° +180° +270°
- C1C6FC
Light Periwinkle
- F8B7BF
≈ Ballerina Pink
- D6CD93
≈ Artichoke Mist
- 8FDBD6
≈ Limpet Shell
Contrast & accessibility
Ag
FailOn white
WCAG 1.64:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.75:1 · APCA Lc 74
Best text color: #000000
WCAG 12.75:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--light-periwinkle: #c1c6fc;
--light-periwinkle-rgb: 193 198 252;
--light-periwinkle-oklch: oklch(0.841 0.076 280.5);
}
.element {
color: var(--light-periwinkle);
background-color: hsl(235 91% 87%);
border-color: oklch(0.841 0.076 280.5);
}Tailwind CSS v4
@theme {
--color-light-periwinkle: #c1c6fc;
--color-light-periwinkle-50: #f1f3ff;
--color-light-periwinkle-100: #e3e5ff;
--color-light-periwinkle-200: #cfd1f4;
--color-light-periwinkle-300: #b1b3de;
--color-light-periwinkle-400: #969acb;
--color-light-periwinkle-500: #7d81b8;
--color-light-periwinkle-600: #696d9b;
--color-light-periwinkle-700: #54577c;
--color-light-periwinkle-800: #3c405c;
--color-light-periwinkle-900: #292c41;
--color-light-periwinkle-950: #171929;
}SCSS
$light-periwinkle: #c1c6fc;
$light-periwinkle-rgb: 193, 198, 252;
$light-periwinkle-light: mix(#fff, $light-periwinkle, 20%);
$light-periwinkle-dark: mix(#000, $light-periwinkle, 20%);
.element {
color: $light-periwinkle;
box-shadow: 0 0 0 2px rgba($light-periwinkle, 0.35);
}