色名 · #4D5B8A
Gem
Gemは#4D5B8A：rgb(77 91 138)、hsl(226 28% 42%)、oklch(0.48 0.078 270.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Gem color name →
#4D5B8A
oklch(0.48 0.078 270.6)
カラー変換
- HEX
- #4d5b8a
- RGB
- rgb(77 91 138)
- HSL
- hsl(226 28% 42%)
- HWB
- hwb(226 30% 46%)
- OKLCH
- oklch(0.48 0.078 270.6)
- OKLab
- oklab(0.48 0.001 -0.078)
- CIE Lab
- lab(39.06 4.46 -28.24)
- LCH
- lch(39.06 28.59 279)
- CMYK
- cmyk(44% 34% 0% 46%)
ティント · シェード · トーン
ティント
- 5D6A96
- 6D7AA1
- 7E8AAD
- 909AB9
- A1AAC4
- B3BBD0
- C6CBDC
- D9DCE7
- ECEEF3
シェード
- 424E77
- 374165
- 2C3553
- 222942
- 181E32
- 0F1322
- 070914
- 020307
- 000001
トーン
- 525F89
- 576389
- 5C6688
- 616A87
- 666E86
- 6B7285
- 707584
- 757983
- 7B7C81
カラーハーモニー
補色 +180°
- 4D5B8A
Gem
- 6E5C24
≈ Bean Green
類似色 -30° +30°
トライアド +120° +240°
スプリットコンプリメンタリー +150° +210°
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.60:1 · APCA Lc 83
Ag
Fail黒の上
WCAG 3.17:1 · APCA Lc 19
最適な文字色: #FFFFFF
WCAG 6.60:1 (AA) · APCA Lc 83
Contrast pairs
コードスニペット
CSS
:root {
--gem: #4d5b8a;
--gem-rgb: 77 91 138;
--gem-oklch: oklch(0.48 0.078 270.6);
}
.element {
color: var(--gem);
background-color: hsl(226 28% 42%);
border-color: oklch(0.48 0.078 270.6);
}Tailwind CSS v4
@theme {
--color-gem: #4d5b8a;
--color-gem-50: #edf4ff;
--color-gem-100: #dfe7ff;
--color-gem-200: #c9d3f7;
--color-gem-300: #aab5e0;
--color-gem-400: #8d9ccd;
--color-gem-500: #7283ba;
--color-gem-600: #616f9d;
--color-gem-700: #4d597e;
--color-gem-800: #37415e;
--color-gem-900: #262d42;
--color-gem-950: #141a2a;
}SCSS
$gem: #4d5b8a;
$gem-rgb: 77, 91, 138;
$gem-light: mix(#fff, $gem, 20%);
$gem-dark: mix(#000, $gem, 20%);
.element {
color: $gem;
box-shadow: 0 0 0 2px rgba($gem, 0.35);
}