이름 색상 · #A7B2D4
Awesome Violet
Awesome Violet은(는) #A7B2D4: rgb(167 178 212), hsl(225 34% 74%), oklch(0.766 0.05 271.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Awesome Violet color name →
#A7B2D4
oklch(0.766 0.05 271.1)
색상 변환
- HEX
- #a7b2d4
- RGB
- rgb(167 178 212)
- HSL
- hsl(225 34% 74%)
- HWB
- hwb(225 65% 17%)
- OKLCH
- oklch(0.766 0.05 271.1)
- OKLab
- oklab(0.766 0.001 -0.05)
- CIE Lab
- lab(72.56 1.48 -18.64)
- LCH
- lch(72.56 18.7 274.5)
- CMYK
- cmyk(21% 16% 0% 17%)
틴트 · 셰이드 · 톤
틴트
- AFBAD8
- B8C1DD
- C1C9E1
- C9D0E5
- D2D8EA
- DBE0EE
- E4E8F2
- EDEFF7
- F6F7FB
셰이드
- 919AB8
- 7B839D
- 666D83
- 525769
- 3E4351
- 2C2F3A
- 1A1D24
- 0A0C10
- 010102
톤
- A3ADCB
- 9FA8C3
- 9BA3BA
- 979EB2
- 9399A9
- 8F94A1
- 8B8F99
- 888A90
- 848588
색 조화
보색 +180°
- A7B2D4
Awesome Violet
- BFB28F
≈ Trailblazer
유사색 -30° +30°
- A7B2D4
Awesome Violet
- 97B8D1
≈ Blue Pointer
- B8ACCF
≈ Jacey’s Favourite
삼각 배색 +120° +240°
- A7B2D4
Awesome Violet
- D1A8A0
≈ Cinnamon Cocoa
- 9DBDA3
≈ Reeds
분열 보색 +150° +210°
- A7B2D4
Awesome Violet
- CBAC93
≈ Pottery Wheel
- AEB895
≈ Moss Print
사각 배색 +90° +180° +270°
- A7B2D4
Awesome Violet
- CFA6B1
≈ Lady Flower
- BFB28F
≈ Trailblazer
- 90BEB5
≈ Scenic View
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.10:1 · APCA Lc 41
Ag
AAA검은색 위
WCAG 9.96:1 · APCA Lc 61
가장 좋은 글자색: #000000
WCAG 9.96:1 (AAA) · APCA Lc 61
Contrast pairs
코드 스니펫
CSS
:root {
--awesome-violet: #a7b2d4;
--awesome-violet-rgb: 167 178 212;
--awesome-violet-oklch: oklch(0.766 0.05 271.1);
}
.element {
color: var(--awesome-violet);
background-color: hsl(225 34% 74%);
border-color: oklch(0.766 0.05 271.1);
}Tailwind CSS v4
@theme {
--color-awesome-violet: #a7b2d4;
--color-awesome-violet-50: #f0f5ff;
--color-awesome-violet-100: #e2e7f9;
--color-awesome-violet-200: #cdd3ea;
--color-awesome-violet-300: #afb6d2;
--color-awesome-violet-400: #939dbd;
--color-awesome-violet-500: #7a85a8;
--color-awesome-violet-600: #67708e;
--color-awesome-violet-700: #525a72;
--color-awesome-violet-800: #3b4254;
--color-awesome-violet-900: #292d3b;
--color-awesome-violet-950: #161a25;
}SCSS
$awesome-violet: #a7b2d4;
$awesome-violet-rgb: 167, 178, 212;
$awesome-violet-light: mix(#fff, $awesome-violet, 20%);
$awesome-violet-dark: mix(#000, $awesome-violet, 20%);
.element {
color: $awesome-violet;
box-shadow: 0 0 0 2px rgba($awesome-violet, 0.35);
}