Named color · #441144
Velvet Cosmos
Velvet Cosmos is #441144: rgb(68 17 68), hsl(300 60% 17%), oklch(0.287 0.104 327.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Velvet Cosmos color name →
#441144
oklch(0.287 0.104 327.9)
Color conversions
- HEX
- #441144
- RGB
- rgb(68 17 68)
- HSL
- hsl(300 60% 17%)
- HWB
- hwb(300 7% 73%)
- OKLCH
- oklch(0.287 0.104 327.9)
- OKLab
- oklab(0.287 0.088 -0.055)
- CIE Lab
- lab(15.69 29.96 -19.86)
- LCH
- lch(15.69 35.94 326.5)
- CMYK
- cmyk(0% 75% 0% 73%)
Tints · Shades · Tones
Tints
- 562855
- 683E67
- 7A5479
- 8C6B8B
- 9F829E
- B29AB0
- C5B3C4
- D8CCD7
- EBE5EB
Shades
- 3A0D3A
- 300930
- 260626
- 1D041D
- 140214
- 0C010C
- 050005
- 020002
- 000000
Tones
- 4B1E4A
- 512950
- 573456
- 5D3F5C
- 634962
- 695468
- 6F5F6E
- 756A74
- 7A757A
Color harmonies
Complementary +180°
- 441144
Velvet Cosmos
- 00350F
≈ Haunted Hills
Analogous -30° +30°
- 441144
Velvet Cosmos
- 321A56
≈ Fabric of Space
- 4F092A
≈ Fig Balsamic
Triadic +120° +240°
- 441144
Velvet Cosmos
- 372800
≈ Secret Passage
- 003137
≈ Roof Tile Green
Split-complementary +150° +210°
- 441144
Velvet Cosmos
- 282F00
≈ Blind Forest
- 00332B
≈ Fence Green
Tetradic +90° +180° +270°
- 441144
Velvet Cosmos
- 432000
≈ Blackened Brown
- 00350F
≈ Haunted Hills
- 002E46
≈ Cosmos Blue
Contrast & accessibility
Ag
AAAOn white
WCAG 14.89:1 · APCA Lc 101
Ag
FailOn black
WCAG 1.40:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 14.89:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--velvet-cosmos: #441144;
--velvet-cosmos-rgb: 68 17 68;
--velvet-cosmos-oklch: oklch(0.287 0.104 327.9);
}
.element {
color: var(--velvet-cosmos);
background-color: hsl(300 60% 17%);
border-color: oklch(0.287 0.104 327.9);
}Tailwind CSS v4
@theme {
--color-velvet-cosmos: #441144;
--color-velvet-cosmos-50: #ffebff;
--color-velvet-cosmos-100: #fddcf9;
--color-velvet-cosmos-200: #eec5ea;
--color-velvet-cosmos-300: #d6a4d1;
--color-velvet-cosmos-400: #c088be;
--color-velvet-cosmos-500: #ab6ca9;
--color-velvet-cosmos-600: #905c8f;
--color-velvet-cosmos-700: #744972;
--color-velvet-cosmos-800: #553556;
--color-velvet-cosmos-900: #3b243c;
--color-velvet-cosmos-950: #251326;
}SCSS
$velvet-cosmos: #441144;
$velvet-cosmos-rgb: 68, 17, 68;
$velvet-cosmos-light: mix(#fff, $velvet-cosmos, 20%);
$velvet-cosmos-dark: mix(#000, $velvet-cosmos, 20%);
.element {
color: $velvet-cosmos;
box-shadow: 0 0 0 2px rgba($velvet-cosmos, 0.35);
}