Nearest named color · #576290
#576290
Nearest named color: Wizard’s Potion
#576290 (rgb(87 98 144), hsl(228 25% 45%), oklch(0.506 0.075 273.2)) is closest to the named color Wizard’s Potion. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#576290
oklch(0.506 0.075 273.2)
Color conversions
- HEX
- #576290
- RGB
- rgb(87 98 144)
- HSL
- hsl(228 25% 45%)
- HWB
- hwb(228 34% 44%)
- OKLCH
- oklch(0.506 0.075 273.2)
- OKLab
- oklab(0.506 0.004 -0.074)
- CIE Lab
- lab(42.1 4.95 -27.04)
- LCH
- lch(42.1 27.49 280.4)
- CMYK
- cmyk(40% 32% 0% 44%)
Tints · Shades · Tones
Tints
- 66719B
- 7680A6
- 868FB1
- 969EBC
- A7AEC7
- B8BED2
- C9CEDE
- DBDEE9
- EDEEF4
Shades
- 4B547D
- 3E476A
- 333A57
- 272D45
- 1C2134
- 121624
- 080B15
- 030307
- 000001
Tones
- 5B658F
- 5F688D
- 636B8C
- 676E8A
- 6B7189
- 6F7487
- 737786
- 787A84
- 7C7D82
Color harmonies
Complementary +180°
- 576290
Wizard’s Potion
- 74642F
≈ Himalaya
Analogous -30° +30°
- 576290
Wizard’s Potion
- 3D6A8D
≈ Rainy Lake
- 6E5A88
≈ Emperor Jewel
Triadic +120° +240°
- 576290
Wizard’s Potion
- 8A5549
≈ Potter’s Rock
- 417251
≈ Fairway
Split-complementary +150° +210°
- 576290
Wizard’s Potion
- 835B36
≈ Rubber
- 5D6C3B
≈ Globe Artichoke
Tetradic +90° +180° +270°
- 576290
Wizard’s Potion
- 895361
≈ Berry Smoothie
- 74642F
≈ Himalaya
- 287369
≈ Advantageous
Contrast & accessibility
Ag
AAOn white
WCAG 5.90:1 · APCA Lc 80
Ag
FailOn black
WCAG 3.55:1 · APCA Lc 22
Best text color: #FFFFFF
WCAG 5.90:1 (AA) · APCA Lc 80
Contrast pairs
Code snippets
CSS
:root {
--wizard-s-potion: #576290;
--wizard-s-potion-rgb: 87 98 144;
--wizard-s-potion-oklch: oklch(0.506 0.075 273.2);
}
.element {
color: var(--wizard-s-potion);
background-color: hsl(228 25% 45%);
border-color: oklch(0.506 0.075 273.2);
}Tailwind CSS v4
@theme {
--color-wizard-s-potion: #576290;
--color-wizard-s-potion-50: #eff4ff;
--color-wizard-s-potion-100: #e0e7ff;
--color-wizard-s-potion-200: #cbd2f5;
--color-wizard-s-potion-300: #acb5de;
--color-wizard-s-potion-400: #909ccb;
--color-wizard-s-potion-500: #7683b8;
--color-wizard-s-potion-600: #646f9b;
--color-wizard-s-potion-700: #50597d;
--color-wizard-s-potion-800: #39415d;
--color-wizard-s-potion-900: #272d41;
--color-wizard-s-potion-950: #151a29;
}SCSS
$wizard-s-potion: #576290;
$wizard-s-potion-rgb: 87, 98, 144;
$wizard-s-potion-light: mix(#fff, $wizard-s-potion, 20%);
$wizard-s-potion-dark: mix(#000, $wizard-s-potion, 20%);
.element {
color: $wizard-s-potion;
box-shadow: 0 0 0 2px rgba($wizard-s-potion, 0.35);
}