Benannte Farbe · #A7B2D4
Awesome Violet
Awesome Violet ist #A7B2D4: rgb(167 178 212), hsl(225 34% 74%), oklch(0.766 0.05 271.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Awesome Violet color name →
#A7B2D4
oklch(0.766 0.05 271.1)
Farbumrechnungen
- 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%)
Tints · Shades · Tones
Tints
- AFBAD8
- B8C1DD
- C1C9E1
- C9D0E5
- D2D8EA
- DBE0EE
- E4E8F2
- EDEFF7
- F6F7FB
Shades
- 919AB8
- 7B839D
- 666D83
- 525769
- 3E4351
- 2C2F3A
- 1A1D24
- 0A0C10
- 010102
Tones
- A3ADCB
- 9FA8C3
- 9BA3BA
- 979EB2
- 9399A9
- 8F94A1
- 8B8F99
- 888A90
- 848588
Farbharmonien
Komplementär +180°
- A7B2D4
Awesome Violet
- BFB28F
≈ Trailblazer
Analog -30° +30°
- A7B2D4
Awesome Violet
- 97B8D1
≈ Blue Pointer
- B8ACCF
≈ Jacey’s Favourite
Triadisch +120° +240°
- A7B2D4
Awesome Violet
- D1A8A0
≈ Cinnamon Cocoa
- 9DBDA3
≈ Reeds
Geteilt komplementär +150° +210°
- A7B2D4
Awesome Violet
- CBAC93
≈ Pottery Wheel
- AEB895
≈ Moss Print
Tetradisch +90° +180° +270°
- A7B2D4
Awesome Violet
- CFA6B1
≈ Lady Flower
- BFB28F
≈ Trailblazer
- 90BEB5
≈ Scenic View
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.10:1 · APCA Lc 41
Ag
AAAAuf Schwarz
WCAG 9.96:1 · APCA Lc 61
Beste Textfarbe: #000000
WCAG 9.96:1 (AAA) · APCA Lc 61
Contrast pairs
Code-Snippets
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);
}