色名 · #35465E
Spelunking
Spelunkingは#35465E：rgb(53 70 94)、hsl(215 28% 29%)、oklch(0.39 0.046 257)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Spelunking color name →
#35465E
oklch(0.39 0.046 257)
カラー変換
- HEX
- #35465e
- RGB
- rgb(53 70 94)
- HSL
- hsl(215 28% 29%)
- HWB
- hwb(215 21% 63%)
- OKLCH
- oklch(0.39 0.046 257)
- OKLab
- oklab(0.39 -0.01 -0.045)
- CIE Lab
- lab(29.06 -1.61 -16.57)
- LCH
- lch(29.06 16.65 264.5)
- CMYK
- cmyk(44% 26% 0% 63%)
ティント · シェード · トーン
ティント
- 47576D
- 59687C
- 6C798C
- 808B9C
- 949EAC
- A9B1BC
- BEC4CC
- D3D7DD
- E9EBEE
シェード
- 2D3C51
- 253244
- 1D2837
- 151E2B
- 0E151F
- 080D14
- 03050A
- 010203
- 000000
トーン
- 3C4C62
- 435165
- 4B5768
- 525D6C
- 5A636F
- 616873
- 696E76
- 707479
- 787A7D
カラーハーモニー
補色 +180°
- 35465E
Spelunking
- 534228
≈ Garden Loam
類似色 -30° +30°
- 35465E
Spelunking
- 284A58
≈ Night Swim
- 43415D
≈ Heraldic
トライアド +120° +240°
- 35465E
Spelunking
- 5C3B3C
≈ Pa Red
- 394B32
≈ Nettle Green
スプリットコンプリメンタリー +150° +210°
- 35465E
Spelunking
- 5A3D2F
≈ Potting Soil
- 484729
≈ Nori Seaweed Green
テトラード +90° +180° +270°
- 35465E
Spelunking
- 583B4A
≈ Dark Fig Violet
- 534228
≈ Garden Loam
- 2B4D40
≈ Hunt Club
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.59:1 · APCA Lc 92
Ag
Fail黒の上
WCAG 2.18:1 · APCA Lc 10
最適な文字色: #FFFFFF
WCAG 9.59:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--spelunking: #35465e;
--spelunking-rgb: 53 70 94;
--spelunking-oklch: oklch(0.39 0.046 257);
}
.element {
color: var(--spelunking);
background-color: hsl(215 28% 29%);
border-color: oklch(0.39 0.046 257);
}Tailwind CSS v4
@theme {
--color-spelunking: #35465e;
--color-spelunking-50: #edf6ff;
--color-spelunking-100: #dfe9f8;
--color-spelunking-200: #c9d5e9;
--color-spelunking-300: #a9b8d0;
--color-spelunking-400: #8da0ba;
--color-spelunking-500: #7388a5;
--color-spelunking-600: #61738c;
--color-spelunking-700: #4e5c70;
--color-spelunking-800: #384353;
--color-spelunking-900: #262f3a;
--color-spelunking-950: #141b24;
}SCSS
$spelunking: #35465e;
$spelunking-rgb: 53, 70, 94;
$spelunking-light: mix(#fff, $spelunking, 20%);
$spelunking-dark: mix(#000, $spelunking, 20%);
.element {
color: $spelunking;
box-shadow: 0 0 0 2px rgba($spelunking, 0.35);
}