最も近い色名 · #4D4159
#4D4159
最も近い色名: Nightly Walk
#4D4159（rgb(77 65 89)、hsl(270 16% 30%)、oklch(0.397 0.042 307.3)）に最も近い色名はNightly Walkです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#4D4159
oklch(0.397 0.042 307.3)
カラー変換
- HEX
- #4d4159
- RGB
- rgb(77 65 89)
- HSL
- hsl(270 16% 30%)
- HWB
- hwb(270 25% 65%)
- OKLCH
- oklch(0.397 0.042 307.3)
- OKLab
- oklab(0.397 0.026 -0.034)
- CIE Lab
- lab(29.53 9.32 -12.42)
- LCH
- lch(29.53 15.53 306.9)
- CMYK
- cmyk(13% 27% 0% 65%)
ティント · シェード · トーン
ティント
- 5D5268
- 6D6378
- 7E7588
- 908898
- A19BA9
- B3AEB9
- C6C2CA
- D9D6DC
- ECEAED
シェード
- 42374C
- 372E40
- 2C2534
- 221C28
- 18131D
- 0F0B13
- 070509
- 020103
- 000000
トーン
- 52475D
- 574D61
- 5C5365
- 615A69
- 66606D
- 6B6670
- 706D74
- 757378
- 7B797C
カラーハーモニー
補色 +180°
- 4D4159
Nightly Walk
- 414B32
≈ Matsuba Green
類似色 -30° +30°
- 4D4159
Nightly Walk
- 41455E
≈ Darkest Navy
- 563E4F
≈ Currant Violet
トライアド +120° +240°
- 4D4159
Nightly Walk
- 57432E
≈ Garden Loam
- 2A4E4B
≈ Hornblende Green
スプリットコンプリメンタリー +150° +210°
- 4D4159
Nightly Walk
- 4D472C
≈ Tinny Tin
- 334E3E
≈ Pine Needle
テトラード +90° +180° +270°
- 4D4159
Nightly Walk
- 5B3F37
≈ Shaved Chocolate
- 414B32
≈ Matsuba Green
- 2B4D56
≈ Atlantic Deep
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.47:1 · APCA Lc 92
Ag
Fail黒の上
WCAG 2.21:1 · APCA Lc 10
最適な文字色: #FFFFFF
WCAG 9.47:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--nightly-walk: #4d4159;
--nightly-walk-rgb: 77 65 89;
--nightly-walk-oklch: oklch(0.397 0.042 307.3);
}
.element {
color: var(--nightly-walk);
background-color: hsl(270 16% 30%);
border-color: oklch(0.397 0.042 307.3);
}Tailwind CSS v4
@theme {
--color-nightly-walk: #4d4159;
--color-nightly-walk-50: #f9f2ff;
--color-nightly-walk-100: #ece4f3;
--color-nightly-walk-200: #dad0e2;
--color-nightly-walk-300: #beb2c8;
--color-nightly-walk-400: #a598b2;
--color-nightly-walk-500: #8e7f9d;
--color-nightly-walk-600: #786c84;
--color-nightly-walk-700: #60566a;
--color-nightly-walk-800: #463f4e;
--color-nightly-walk-900: #302b37;
--color-nightly-walk-950: #1d1921;
}SCSS
$nightly-walk: #4d4159;
$nightly-walk-rgb: 77, 65, 89;
$nightly-walk-light: mix(#fff, $nightly-walk, 20%);
$nightly-walk-dark: mix(#000, $nightly-walk, 20%);
.element {
color: $nightly-walk;
box-shadow: 0 0 0 2px rgba($nightly-walk, 0.35);
}