色名 · #3D3D63
Storm Is Coming
Storm Is Comingは#3D3D63：rgb(61 61 99)、hsl(240 24% 31%)、oklch(0.378 0.064 282.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Storm Is Coming color name →
#3D3D63
oklch(0.378 0.064 282.9)
カラー変換
- HEX
- #3d3d63
- RGB
- rgb(61 61 99)
- HSL
- hsl(240 24% 31%)
- HWB
- hwb(240 24% 61%)
- OKLCH
- oklch(0.378 0.064 282.9)
- OKLab
- oklab(0.378 0.014 -0.063)
- CIE Lab
- lab(27.13 7.92 -22.69)
- LCH
- lch(27.13 24.03 289.2)
- CMYK
- cmyk(38% 38% 0% 61%)
ティント · シェード · トーン
ティント
- 4E4E72
- 5F6081
- 727390
- 84869F
- 9899AF
- ABADBF
- C0C1CF
- D4D5DF
- EAEAEF
シェード
- 343455
- 2B2B47
- 22223A
- 1A1A2E
- 121221
- 0A0A16
- 04040B
- 010103
- 000000
トーン
- 434466
- 494A69
- 50516C
- 56576F
- 5D5E72
- 646575
- 6B6C78
- 72727B
- 79797D
カラーハーモニー
補色 +180°
- 3D3D63
Storm Is Coming
- 484316
≈ Alligator Gladiator
類似色 -30° +30°
- 3D3D63
Storm Is Coming
- 284363
≈ Black Turmeric
- 4E375A
≈ Blackberry Cordial
トライアド +120° +240°
- 3D3D63
Storm Is Coming
- 5E3625
≈ Chubby Chocolate
- 1B4C38
≈ County Green
スプリットコンプリメンタリー +150° +210°
- 3D3D63
Storm Is Coming
- 563C16
≈ Pineapple
- 344924
≈ Nettle Green
テトラード +90° +180° +270°
- 3D3D63
Storm Is Coming
- 5F3338
≈ Rampant Rhubarb
- 484316
≈ Alligator Gladiator
- 014C4B
≈ Swamp Mausoleum
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 10.26:1 · APCA Lc 94
Ag
Fail黒の上
WCAG 2.04:1 · APCA Lc 9
最適な文字色: #FFFFFF
WCAG 10.26:1 (AAA) · APCA Lc 94
Contrast pairs
コードスニペット
CSS
:root {
--storm-is-coming: #3d3d63;
--storm-is-coming-rgb: 61 61 99;
--storm-is-coming-oklch: oklch(0.378 0.064 282.9);
}
.element {
color: var(--storm-is-coming);
background-color: hsl(240 24% 31%);
border-color: oklch(0.378 0.064 282.9);
}Tailwind CSS v4
@theme {
--color-storm-is-coming: #3d3d63;
--color-storm-is-coming-50: #f3f3ff;
--color-storm-is-coming-100: #e5e5fd;
--color-storm-is-coming-200: #d1d1ef;
--color-storm-is-coming-300: #b3b3d8;
--color-storm-is-coming-400: #989ac4;
--color-storm-is-coming-500: #8081b0;
--color-storm-is-coming-600: #6c6d95;
--color-storm-is-coming-700: #565777;
--color-storm-is-coming-800: #3e4058;
--color-storm-is-coming-900: #2b2c3e;
--color-storm-is-coming-950: #181927;
}SCSS
$storm-is-coming: #3d3d63;
$storm-is-coming-rgb: 61, 61, 99;
$storm-is-coming-light: mix(#fff, $storm-is-coming, 20%);
$storm-is-coming-dark: mix(#000, $storm-is-coming, 20%);
.element {
color: $storm-is-coming;
box-shadow: 0 0 0 2px rgba($storm-is-coming, 0.35);
}