이름 색상 · #A2ACC5
Foxflower Viola
Foxflower Viola은(는) #A2ACC5: rgb(162 172 197), hsl(223 23% 70%), oklch(0.745 0.038 268.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Foxflower Viola color name →
#A2ACC5
oklch(0.745 0.038 268.2)
색상 변환
- 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%)
틴트 · 셰이드 · 톤
틴트
- ABB4CB
- B4BCD1
- BDC4D6
- C6CDDC
- D0D5E2
- D9DDE8
- E2E6EE
- ECEEF3
- F5F6F9
셰이드
- 8C95AB
- 777F92
- 636979
- 4F5461
- 3C404B
- 2A2D35
- 191B21
- 0A0B0E
- 010102
톤
- 9FA8BE
- 9BA3B7
- 989FB0
- 949AA9
- 9196A2
- 8D919B
- 8A8D94
- 87898D
- 838487
색 조화
보색 +180°
- A2ACC5
Foxflower Viola
- B6AB92
≈ Bison Hide
유사색 -30° +30°
- A2ACC5
Foxflower Viola
- 97B0C2
≈ Porcelain Vase
- AFA8C2
≈ Winter Amethyst
삼각 배색 +120° +240°
- A2ACC5
Foxflower Viola
- C3A49F
≈ Mohair Mauve
- 9DB39F
≈ Copper Patina
분열 보색 +150° +210°
- A2ACC5
Foxflower Viola
- BFA795
≈ Snug as a Bug
- AAB095
≈ Olive Sprig
사각 배색 +90° +180° +270°
- A2ACC5
Foxflower Viola
- C1A3AC
≈ Decanting
- B6AB92
≈ Bison Hide
- 94B5AC
≈ Treetop
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.27:1 · APCA Lc 45
Ag
AAA검은색 위
WCAG 9.24:1 · APCA Lc 57
가장 좋은 글자색: #000000
WCAG 9.24:1 (AAA) · APCA Lc 57
Contrast pairs
코드 스니펫
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);
}