Nazwany kolor · #A2ACC5
Foxflower Viola
Foxflower Viola to #A2ACC5: rgb(162 172 197), hsl(223 23% 70%), oklch(0.745 0.038 268.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Foxflower Viola color name →
#A2ACC5
oklch(0.745 0.038 268.2)
Konwersje koloru
- HEX
- #a2acc5
- RGB
- rgb(162 172 197)
- HSL
- hsl(223 23% 70%)
- HWB
- hwb(223 64% 23%)
- OKLCH
- oklch(0.745 0.038 268.2)
- OKLab
- oklab(0.745 -0.001 -0.038)
- CIE Lab
- lab(70.17 0.31 -14.07)
- LCH
- lch(70.17 14.08 271.3)
- CMYK
- cmyk(18% 13% 0% 23%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- ABB4CB
- B4BCD1
- BDC4D6
- C6CDDC
- D0D5E2
- D9DDE8
- E2E6EE
- ECEEF3
- F5F6F9
Odcienie ciemniejsze
- 8C95AB
- 777F92
- 636979
- 4F5461
- 3C404B
- 2A2D35
- 191B21
- 0A0B0E
- 010102
Tony
- 9FA8BE
- 9BA3B7
- 989FB0
- 949AA9
- 9196A2
- 8D919B
- 8A8D94
- 87898D
- 838487
Harmonie kolorów
Komplementarna +180°
- A2ACC5
Foxflower Viola
- B6AB92
≈ Bison Hide
Analogowa -30° +30°
- A2ACC5
Foxflower Viola
- 97B0C2
≈ Porcelain Vase
- AFA8C2
≈ Winter Amethyst
Triada +120° +240°
- A2ACC5
Foxflower Viola
- C3A49F
≈ Mohair Mauve
- 9DB39F
≈ Copper Patina
Komplementarna rozszczepiona +150° +210°
- A2ACC5
Foxflower Viola
- BFA795
≈ Snug as a Bug
- AAB095
≈ Olive Sprig
Tetrada +90° +180° +270°
- A2ACC5
Foxflower Viola
- C1A3AC
≈ Decanting
- B6AB92
≈ Bison Hide
- 94B5AC
≈ Treetop
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.27:1 · APCA Lc 45
Ag
AAANa czerni
WCAG 9.24:1 · APCA Lc 57
Najlepszy kolor tekstu: #000000
WCAG 9.24:1 (AAA) · APCA Lc 57
Contrast pairs
Fragmenty kodu
CSS
:root {
--foxflower-viola: #a2acc5;
--foxflower-viola-rgb: 162 172 197;
--foxflower-viola-oklch: oklch(0.745 0.038 268.2);
}
.element {
color: var(--foxflower-viola);
background-color: hsl(223 23% 70%);
border-color: oklch(0.745 0.038 268.2);
}Tailwind CSS v4
@theme {
--color-foxflower-viola: #a2acc5;
--color-foxflower-viola-50: #f1f5ff;
--color-foxflower-viola-100: #e3e8f5;
--color-foxflower-viola-200: #ced4e5;
--color-foxflower-viola-300: #b0b7cb;
--color-foxflower-viola-400: #959eb6;
--color-foxflower-viola-500: #7b86a0;
--color-foxflower-viola-600: #687187;
--color-foxflower-viola-700: #535b6c;
--color-foxflower-viola-800: #3c4250;
--color-foxflower-viola-900: #292e38;
--color-foxflower-viola-950: #171b22;
}SCSS
$foxflower-viola: #a2acc5;
$foxflower-viola-rgb: 162, 172, 197;
$foxflower-viola-light: mix(#fff, $foxflower-viola, 20%);
$foxflower-viola-dark: mix(#000, $foxflower-viola, 20%);
.element {
color: $foxflower-viola;
box-shadow: 0 0 0 2px rgba($foxflower-viola, 0.35);
}