Nearest named color · #457F6B
#457F6B
Nearest named color: Majorelle Gardens
#457F6B (rgb(69 127 107), hsl(159 30% 38%), oklch(0.551 0.069 169.3)) is closest to the named color Majorelle Gardens. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#457F6B
oklch(0.551 0.069 169.3)
Color conversions
- HEX
- #457f6b
- RGB
- rgb(69 127 107)
- HSL
- hsl(159 30% 38%)
- HWB
- hwb(159 27% 50%)
- OKLCH
- oklch(0.551 0.069 169.3)
- OKLab
- oklab(0.551 -0.068 0.013)
- CIE Lab
- lab(48.8 -23.76 4.7)
- LCH
- lch(48.8 24.22 168.8)
- CMYK
- cmyk(46% 0% 16% 50%)
Tints · Shades · Tones
Tints
- 588B79
- 6A9887
- 7DA495
- 8FB1A3
- A1BDB2
- B4CAC1
- C6D7D0
- D9E4E0
- ECF2EF
Shades
- 3B6E5C
- 315D4E
- 274C3F
- 1E3C32
- 152D25
- 0C1F18
- 05110D
- 020604
- 000100
Tones
- 4C7F6D
- 537F6F
- 598071
- 5F8073
- 658075
- 6B8078
- 70807A
- 76807C
- 7B807E
Color harmonies
Complementary +180°
- 457F6B
Majorelle Gardens
- 916178
≈ Victorian Plum
Analogous -30° +30°
- 457F6B
Majorelle Gardens
- 5D7C55
≈ Green Mantle
- 397E81
≈ Sea Urchin
Triadic +120° +240°
- 457F6B
Majorelle Gardens
- 706B98
≈ Purple Grapes
- 93664D
≈ Rustic Earth
Split-complementary +150° +210°
- 457F6B
Majorelle Gardens
- 84658C
≈ Sunshone Plum
- 966161
≈ Abra Cadabra
Tetradic +90° +180° +270°
- 457F6B
Majorelle Gardens
- 59739A
≈ Clean Slate
- 916178
≈ Victorian Plum
- 876D41
≈ Ground Cumin
Contrast & accessibility
Ag
AAOn white
WCAG 4.66:1 · APCA Lc 72
Ag
AAOn black
WCAG 4.50:1 · APCA Lc 29
Best text color: #FFFFFF
WCAG 4.66:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--majorelle-gardens: #457f6b;
--majorelle-gardens-rgb: 69 127 107;
--majorelle-gardens-oklch: oklch(0.551 0.069 169.3);
}
.element {
color: var(--majorelle-gardens);
background-color: hsl(159 30% 38%);
border-color: oklch(0.551 0.069 169.3);
}Tailwind CSS v4
@theme {
--color-majorelle-gardens: #457f6b;
--color-majorelle-gardens-50: #e2fcf3;
--color-majorelle-gardens-100: #d2f0e5;
--color-majorelle-gardens-200: #b8ded0;
--color-majorelle-gardens-300: #94c3b3;
--color-majorelle-gardens-400: #75ac98;
--color-majorelle-gardens-500: #54957f;
--color-majorelle-gardens-600: #487e6b;
--color-majorelle-gardens-700: #396556;
--color-majorelle-gardens-800: #294a3d;
--color-majorelle-gardens-900: #1c332a;
--color-majorelle-gardens-950: #0c1f18;
}SCSS
$majorelle-gardens: #457f6b;
$majorelle-gardens-rgb: 69, 127, 107;
$majorelle-gardens-light: mix(#fff, $majorelle-gardens, 20%);
$majorelle-gardens-dark: mix(#000, $majorelle-gardens, 20%);
.element {
color: $majorelle-gardens;
box-shadow: 0 0 0 2px rgba($majorelle-gardens, 0.35);
}