色名 · #415053

Lunar Eclipse

Lunar Eclipseは#415053：rgb(65 80 83)、hsl(190 12% 29%)、oklch(0.419 0.02 211.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Lunar Eclipse color name →

#415053

oklch(0.419 0.02 211.1)

カラー変換

HEX: #415053
RGB: rgb(65 80 83)
HSL: hsl(190 12% 29%)
HWB: hwb(190 25% 67%)
OKLCH: oklch(0.419 0.02 211.1)
OKLab: oklab(0.419 -0.017 -0.01)
CIE Lab: lab(32.81 -5.54 -3.84)
LCH: lch(32.81 6.74 214.7)
CMYK: cmyk(22% 4% 0% 67%)

ティント · シェード · トーン

ティント

526063
637073
758183
889294
9BA3A5
AEB5B6
C2C7C8
D6D9DA
EAECEC

シェード

374447
2E393B
252E30
1C2425
131A1B
0B1011
050708
010202
000000

トーン

475557
4D595C
535E60
5A6365
606869
666C6E
6D7172
737677
797B7B

カラーハーモニー

補色 +180°

415053
Lunar Eclipse
574946
≈ Molasses

類似色 -30° +30°

トライアド +120° +240°

スプリットコンプリメンタリー +150° +210°

テトラード +90° +180° +270°

コントラストとアクセシビリティ

白の上

WCAG 8.40:1 · APCA Lc 89

AAA

黒の上

WCAG 2.49:1 · APCA Lc 13

Fail

最適な文字色: #FFFFFF

WCAG 8.40:1 (AAA) · APCA Lc 89

Contrast pairs

コードスニペット

CSS

:root {
  --lunar-eclipse: #415053;
  --lunar-eclipse-rgb: 65 80 83;
  --lunar-eclipse-oklch: oklch(0.419 0.02 211.1);
}

.element {
  color: var(--lunar-eclipse);
  background-color: hsl(190 12% 29%);
  border-color: oklch(0.419 0.02 211.1);
}

Tailwind CSS v4

@theme {
  --color-lunar-eclipse: #415053;
  --color-lunar-eclipse-50: #eff7f8;
  --color-lunar-eclipse-100: #e1eaec;
  --color-lunar-eclipse-200: #cbd7d9;
  --color-lunar-eclipse-300: #adbabd;
  --color-lunar-eclipse-400: #92a2a5;
  --color-lunar-eclipse-500: #788a8e;
  --color-lunar-eclipse-600: #667578;
  --color-lunar-eclipse-700: #515d60;
  --color-lunar-eclipse-800: #3b4446;
  --color-lunar-eclipse-900: #282f30;
  --color-lunar-eclipse-950: #161c1d;
}

SCSS

$lunar-eclipse: #415053;
$lunar-eclipse-rgb: 65, 80, 83;
$lunar-eclipse-light: mix(#fff, $lunar-eclipse, 20%);
$lunar-eclipse-dark: mix(#000, $lunar-eclipse, 20%);

.element {
  color: $lunar-eclipse;
  box-shadow: 0 0 0 2px rgba($lunar-eclipse, 0.35);
}

近い色名

Palettes with similar colors

ツールで開く

ピッカーペアコントラストチェッカー Studio JSON API