Named color · #273E51
Asurmen Blue Wash
Asurmen Blue Wash is #273E51: rgb(39 62 81), hsl(207 35% 24%), oklch(0.354 0.044 244.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Asurmen Blue Wash color name →
#273E51
oklch(0.354 0.044 244.4)
Color conversions
- HEX
- #273e51
- RGB
- rgb(39 62 81)
- HSL
- hsl(207 35% 24%)
- HWB
- hwb(207 15% 68%)
- OKLCH
- oklch(0.354 0.044 244.4)
- OKLab
- oklab(0.354 -0.019 -0.04)
- CIE Lab
- lab(24.96 -4.68 -14.54)
- LCH
- lch(24.96 15.28 252.1)
- CMYK
- cmyk(52% 23% 0% 68%)
Tints · Shades · Tones
Tints
- 3A4F61
- 4E6171
- 627382
- 778693
- 8C99A4
- A2ADB6
- B9C1C8
- D0D5DA
- E7EAEC
Shades
- 203545
- 1A2B3A
- 14232F
- 0E1A24
- 08121A
- 040A10
- 020407
- 010102
- 000000
Tones
- 304456
- 384B5A
- 41515F
- 4A5864
- 535E69
- 5B656D
- 646C72
- 6E7277
- 77797B
Color harmonies
Complementary +180°
- 273E51
Asurmen Blue Wash
- 4C3722
≈ Café Noir
Analogous -30° +30°
- 273E51
Asurmen Blue Wash
- 1D414A
≈ Bay Isle Pointe
- 343A53
≈ Biscay
Triadic +120° +240°
- 273E51
Asurmen Blue Wash
- 4F3239
≈ Joyful Ruby
- 364026
≈ Deep Seaweed
Split-complementary +150° +210°
- 273E51
Asurmen Blue Wash
- 50332C
≈ Barn Swallow
- 433B20
≈ Lisbon Brown
Tetradic +90° +180° +270°
- 273E51
Asurmen Blue Wash
- 4A3345
≈ Loulou
- 4C3722
≈ Café Noir
- 284231
≈ English Holly
Contrast & accessibility
Ag
AAAOn white
WCAG 11.08:1 · APCA Lc 96
Ag
FailOn black
WCAG 1.89:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 11.08:1 (AAA) · APCA Lc 96
Contrast pairs
Code snippets
CSS
:root {
--asurmen-blue-wash: #273e51;
--asurmen-blue-wash-rgb: 39 62 81;
--asurmen-blue-wash-oklch: oklch(0.354 0.044 244.4);
}
.element {
color: var(--asurmen-blue-wash);
background-color: hsl(207 35% 24%);
border-color: oklch(0.354 0.044 244.4);
}Tailwind CSS v4
@theme {
--color-asurmen-blue-wash: #273e51;
--color-asurmen-blue-wash-50: #ebf7ff;
--color-asurmen-blue-wash-100: #ddeaf6;
--color-asurmen-blue-wash-200: #c6d7e6;
--color-asurmen-blue-wash-300: #a6bacd;
--color-asurmen-blue-wash-400: #89a2b7;
--color-asurmen-blue-wash-500: #6e8aa2;
--color-asurmen-blue-wash-600: #5d7589;
--color-asurmen-blue-wash-700: #4a5d6e;
--color-asurmen-blue-wash-800: #354451;
--color-asurmen-blue-wash-900: #242f38;
--color-asurmen-blue-wash-950: #131c23;
}SCSS
$asurmen-blue-wash: #273e51;
$asurmen-blue-wash-rgb: 39, 62, 81;
$asurmen-blue-wash-light: mix(#fff, $asurmen-blue-wash, 20%);
$asurmen-blue-wash-dark: mix(#000, $asurmen-blue-wash, 20%);
.element {
color: $asurmen-blue-wash;
box-shadow: 0 0 0 2px rgba($asurmen-blue-wash, 0.35);
}