Color con nombre · #C7C5DC
Violet Sweet Pea
Violet Sweet Pea es #C7C5DC: rgb(199 197 220), hsl(245 25% 82%), oklch(0.832 0.032 289.7). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Violet Sweet Pea color name →
#C7C5DC
oklch(0.832 0.032 289.7)
Conversiones de color
- HEX
- #c7c5dc
- RGB
- rgb(199 197 220)
- HSL
- hsl(245 25% 82%)
- HWB
- hwb(245 77% 14%)
- OKLCH
- oklch(0.832 0.032 289.7)
- OKLab
- oklab(0.832 0.011 -0.03)
- CIE Lab
- lab(80.22 4.02 -11.24)
- LCH
- lch(80.22 11.93 289.7)
- CMYK
- cmyk(10% 10% 0% 14%)
Tintes · Sombras · Tonos
Tintes
- CCCBE0
- D2D0E3
- D7D6E7
- DDDCEA
- E3E2EE
- E8E8F1
- EEEDF5
- F4F3F8
- F9F9FC
Sombras
- ADABBF
- 9392A3
- 7A7988
- 62616E
- 4C4B54
- 36353C
- 212126
- 0E0E11
- 020202
Tonos
- C0BED2
- B8B7C9
- B1B0C0
- AAA9B6
- A3A2AD
- 9C9BA4
- 95949B
- 8E8D92
- 878789
Armonías de color
Complementario +180°
- C7C5DC
Violet Sweet Pea
- C9CAB3
≈ Whispering Pine
Análogo -30° +30°
- C7C5DC
Violet Sweet Pea
- BCC9DD
≈ Light Pearl Soft Blue
- D2C2D5
≈ Seedless Grape
Triádico +120° +240°
- C7C5DC
Violet Sweet Pea
- DAC3B6
≈ Basic Coral
- B5CFC5
≈ Quiet Drizzle
Complementario dividido +150° +210°
- C7C5DC
Violet Sweet Pea
- D3C6B1
≈ Parlour Taupe
- BECDBA
≈ Jade Tinge
Tetrádico +90° +180° +270°
- C7C5DC
Violet Sweet Pea
- DCC0C0
≈ Mud Pink
- C9CAB3
≈ Whispering Pine
- B1CFD0
≈ Turquoise Grey
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.68:1 · APCA Lc 30
Ag
AAASobre negro
WCAG 12.44:1 · APCA Lc 73
Mejor color de texto: #000000
WCAG 12.44:1 (AAA) · APCA Lc 73
Contrast pairs
Fragmentos de código
CSS
:root {
--violet-sweet-pea: #c7c5dc;
--violet-sweet-pea-rgb: 199 197 220;
--violet-sweet-pea-oklch: oklch(0.832 0.032 289.7);
}
.element {
color: var(--violet-sweet-pea);
background-color: hsl(245 25% 82%);
border-color: oklch(0.832 0.032 289.7);
}Tailwind CSS v4
@theme {
--color-violet-sweet-pea: #c7c5dc;
--color-violet-sweet-pea-50: #f5f4fe;
--color-violet-sweet-pea-100: #e8e6f2;
--color-violet-sweet-pea-200: #d4d2e1;
--color-violet-sweet-pea-300: #b7b5c7;
--color-violet-sweet-pea-400: #9e9cb1;
--color-violet-sweet-pea-500: #85839a;
--color-violet-sweet-pea-600: #716f83;
--color-violet-sweet-pea-700: #5a5969;
--color-violet-sweet-pea-800: #41414d;
--color-violet-sweet-pea-900: #2d2d36;
--color-violet-sweet-pea-950: #1a1a21;
}SCSS
$violet-sweet-pea: #c7c5dc;
$violet-sweet-pea-rgb: 199, 197, 220;
$violet-sweet-pea-light: mix(#fff, $violet-sweet-pea, 20%);
$violet-sweet-pea-dark: mix(#000, $violet-sweet-pea, 20%);
.element {
color: $violet-sweet-pea;
box-shadow: 0 0 0 2px rgba($violet-sweet-pea, 0.35);
}