Nazwany kolor · #ACB5DC
Sassy Violet
Sassy Violet to #ACB5DC: rgb(172 181 220), hsl(229 41% 77%), oklch(0.779 0.057 274.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Sassy Violet color name →
#ACB5DC
oklch(0.779 0.057 274.8)
Konwersje koloru
- HEX
- #acb5dc
- RGB
- rgb(172 181 220)
- HSL
- hsl(229 41% 77%)
- HWB
- hwb(229 67% 14%)
- OKLCH
- oklch(0.779 0.057 274.8)
- OKLab
- oklab(0.779 0.005 -0.056)
- CIE Lab
- lab(73.96 2.99 -20.83)
- LCH
- lch(73.96 21.05 278.2)
- CMYK
- cmyk(22% 18% 0% 14%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B4BCE0
- BCC4E3
- C4CBE7
- CCD2EA
- D5DAEE
- DDE1F1
- E5E8F5
- EEF0F8
- F6F7FC
Odcienie ciemniejsze
- 959DBF
- 7F86A3
- 696F88
- 54596E
- 404454
- 2D303C
- 1B1D26
- 0B0C11
- 010202
Tony
- A7B0D3
- A3AAC9
- 9FA5C0
- 9AA0B6
- 969AAD
- 9195A4
- 8D909B
- 898A92
- 848589
Harmonie kolorów
Komplementarna +180°
- ACB5DC
Sassy Violet
- C2B78E
≈ Modish Moss
Analogowa -30° +30°
- ACB5DC
Sassy Violet
- 99BCD9
≈ Blue Grouse
- BFAFD5
≈ Moonraker
Triada +120° +240°
- ACB5DC
Sassy Violet
- D9AB9F
≈ Everything’s Rosy
- 9BC2A7
≈ Aroma Garden
Komplementarna rozszczepiona +150° +210°
- ACB5DC
Sassy Violet
- D1B092
≈ Fossil Tan
- AFBE97
≈ Pale Spring Morning
Tetrada +90° +180° +270°
- ACB5DC
Sassy Violet
- D8A9B2
≈ Pink Nectar
- C2B78E
≈ Modish Moss
- 8EC3BC
≈ Focus Point
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.01:1 · APCA Lc 39
Ag
AAANa czerni
WCAG 10.39:1 · APCA Lc 63
Najlepszy kolor tekstu: #000000
WCAG 10.39:1 (AAA) · APCA Lc 63
Contrast pairs
Fragmenty kodu
CSS
:root {
--sassy-violet: #acb5dc;
--sassy-violet-rgb: 172 181 220;
--sassy-violet-oklch: oklch(0.779 0.057 274.8);
}
.element {
color: var(--sassy-violet);
background-color: hsl(229 41% 77%);
border-color: oklch(0.779 0.057 274.8);
}Tailwind CSS v4
@theme {
--color-sassy-violet: #acb5dc;
--color-sassy-violet-50: #f1f4ff;
--color-sassy-violet-100: #e3e7fb;
--color-sassy-violet-200: #ced3ed;
--color-sassy-violet-300: #afb5d5;
--color-sassy-violet-400: #949cc0;
--color-sassy-violet-500: #7b84ac;
--color-sassy-violet-600: #686f91;
--color-sassy-violet-700: #535975;
--color-sassy-violet-800: #3c4156;
--color-sassy-violet-900: #292d3c;
--color-sassy-violet-950: #171a26;
}SCSS
$sassy-violet: #acb5dc;
$sassy-violet-rgb: 172, 181, 220;
$sassy-violet-light: mix(#fff, $sassy-violet, 20%);
$sassy-violet-dark: mix(#000, $sassy-violet, 20%);
.element {
color: $sassy-violet;
box-shadow: 0 0 0 2px rgba($sassy-violet, 0.35);
}