色名 · #222255
Spacescape
Spacescapeは#222255：rgb(34 34 85)、hsl(240 43% 23%)、oklch(0.284 0.09 279)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Spacescape color name →
#222255
oklch(0.284 0.09 279)
カラー変換
- HEX
- #222255
- RGB
- rgb(34 34 85)
- HSL
- hsl(240 43% 23%)
- HWB
- hwb(240 13% 67%)
- OKLCH
- oklch(0.284 0.09 279)
- OKLab
- oklab(0.284 0.014 -0.089)
- CIE Lab
- lab(15.76 13.27 -31.69)
- LCH
- lch(15.76 34.35 292.7)
- CMYK
- cmyk(60% 60% 0% 67%)
ティント · シェード · トーン
ティント
- 343666
- 474B76
- 5B5F87
- 707598
- 868AA9
- 9DA1BA
- B5B8CB
- CDCFDC
- E6E7ED
シェード
- 1C1C49
- 16163D
- 111131
- 0B0B26
- 07071C
- 030311
- 010108
- 000002
- 000000
トーン
- 2A2C5A
- 32355F
- 3B3E63
- 444768
- 4D516C
- 575A70
- 616374
- 6B6D78
- 75767C
カラーハーモニー
補色 +180°
- 222255
Spacescape
- 312A00
≈ Secret Passage
類似色 -30° +30°
- 222255
Spacescape
- 002B4F
≈ Royal Blue Metallic
- 371A4B
≈ Russian Violet
トライアド +120° +240°
- 222255
Spacescape
- 4D1401
≈ Earth Brown
- 00331E
≈ Nightly Woods
スプリットコンプリメンタリー +150° +210°
- 222255
Spacescape
- 3D2300
≈ Dark Ebony
- 1E3100
≈ Blind Forest
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 14.70:1 · APCA Lc 101
Ag
Fail黒の上
WCAG 1.42:1 · APCA Lc 0
最適な文字色: #FFFFFF
WCAG 14.70:1 (AAA) · APCA Lc 101
Contrast pairs
コードスニペット
CSS
:root {
--spacescape: #222255;
--spacescape-rgb: 34 34 85;
--spacescape-oklch: oklch(0.284 0.09 279);
}
.element {
color: var(--spacescape);
background-color: hsl(240 43% 23%);
border-color: oklch(0.284 0.09 279);
}Tailwind CSS v4
@theme {
--color-spacescape: #222255;
--color-spacescape-50: #f0f3ff;
--color-spacescape-100: #e2e5ff;
--color-spacescape-200: #cdd1fb;
--color-spacescape-300: #afb3e5;
--color-spacescape-400: #9399d3;
--color-spacescape-500: #797fc1;
--color-spacescape-600: #676ca3;
--color-spacescape-700: #525683;
--color-spacescape-800: #3a3f61;
--color-spacescape-900: #282c44;
--color-spacescape-950: #16192c;
}SCSS
$spacescape: #222255;
$spacescape-rgb: 34, 34, 85;
$spacescape-light: mix(#fff, $spacescape, 20%);
$spacescape-dark: mix(#000, $spacescape, 20%);
.element {
color: $spacescape;
box-shadow: 0 0 0 2px rgba($spacescape, 0.35);
}