最も近い色名 · #554B94
#554B94
最も近い色名: Twilight
#554B94（rgb(85 75 148)、hsl(248 33% 44%)、oklch(0.459 0.116 287.2)）に最も近い色名はTwilightです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#554B94
oklch(0.459 0.116 287.2)
カラー変換
- HEX
- #554b94
- RGB
- rgb(85 75 148)
- HSL
- hsl(248 33% 44%)
- HWB
- hwb(248 29% 42%)
- OKLCH
- oklch(0.459 0.116 287.2)
- OKLab
- oklab(0.459 0.034 -0.11)
- CIE Lab
- lab(35.71 18.91 -39.48)
- LCH
- lch(35.71 43.78 295.6)
- CMYK
- cmyk(43% 49% 0% 42%)
ティント · シェード · トーン
ティント
- 645C9F
- 736EAA
- 837FB5
- 9491C0
- A5A3CB
- B6B5D5
- C8C7E0
- DAD9EA
- ECECF5
シェード
- 494080
- 3D356D
- 312B5A
- 262148
- 1C1736
- 110E26
- 080616
- 020208
- 000001
トーン
- 595193
- 5D5791
- 615C8F
- 65618E
- 69678C
- 6E6C8A
- 727188
- 777685
- 7B7B83
カラーハーモニー
補色 +180°
- 554B94
Twilight
- 5E5B00
≈ Greensboro
類似色 -30° +30°
- 554B94
Twilight
- 295797
≈ B’dazzled Blue
- 714082
≈ Amaranth Purple
トライアド +120° +240°
- 554B94
Twilight
- 8A3F12
≈ Gryphonne Sepia Wash
- 00684D
≈ Bottle Green
スプリットコンプリメンタリー +150° +210°
- 554B94
Twilight
- 754F00
≈ Lucky Brown
- 35661E
≈ Radical Green
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.44:1 · APCA Lc 86
Ag
Fail黒の上
WCAG 2.82:1 · APCA Lc 16
最適な文字色: #FFFFFF
WCAG 7.44:1 (AAA) · APCA Lc 86
Contrast pairs
コードスニペット
CSS
:root {
--twilight: #554b94;
--twilight-rgb: 85 75 148;
--twilight-oklch: oklch(0.459 0.116 287.2);
}
.element {
color: var(--twilight);
background-color: hsl(248 33% 44%);
border-color: oklch(0.459 0.116 287.2);
}Tailwind CSS v4
@theme {
--color-twilight: #554b94;
--color-twilight-50: #f3f0ff;
--color-twilight-100: #e6e2ff;
--color-twilight-200: #d2cdff;
--color-twilight-300: #b5aeef;
--color-twilight-400: #9a93df;
--color-twilight-500: #8278ce;
--color-twilight-600: #6e66ae;
--color-twilight-700: #58528c;
--color-twilight-800: #3f3c68;
--color-twilight-900: #2b2949;
--color-twilight-950: #191730;
}SCSS
$twilight: #554b94;
$twilight-rgb: 85, 75, 148;
$twilight-light: mix(#fff, $twilight, 20%);
$twilight-dark: mix(#000, $twilight, 20%);
.element {
color: $twilight;
box-shadow: 0 0 0 2px rgba($twilight, 0.35);
}