紫紺
しこん|Shikon
色コードの出典:紫紺 - 和色大辞典
広色域(Display P3)比較
sRGB(従来のWeb標準)
#460E44
Display P3(広色域)
color(display-p3 0.2507 0.0726 0.2576)
意味と歴史
CSSコード
HEX
#460E44RGB
rgb(70, 14, 68)CMYK
cmyk(0%, 80%, 2.9%, 72.5%)HSV
hsv(302.1, 80%, 27.5%)OKLCH
oklch(28.74% 0.1093 329.5)Display P3
color(display-p3 0.2507 0.0726 0.2576)Munsell
CIE XYZ
XYZ(0.03726, 0.02034, 0.05664)CIE L*a*b*
Lab(15.663649, 33.373913, -20.067008)CIE LCH(ab)
LCH(15.663649, 38.942302, 328.982422°)CIE L*u*v*
Luv(15.663649, 18.96273, -22.604387)Hunter Lab
Hunter Lab(14.261147, 22.792988, -14.92859)xyY
xyY(0.326171, 0.178029, 0.02034)JzAzBz
JzAzBz(0.003397, 0.002606, -0.002138)JzCzHz
JzCzHz(0.003397, 0.003371, 320.634052°)フォールバック付きCSS
.element {
/* sRGBフォールバック */
background-color: #460E44;
background-color: oklch(28.74% 0.1093 329.5);
}
@media (color-gamut: p3) {
.element {
background-color: color(display-p3 0.2507 0.0726 0.2576);
}
}コントラストチェッカー
WCAG 2.1 基準に基づくコントラスト比を表示します。
白背景
14.93:1
AA PassAAA Pass
AA大文字 Pass
黒背景
1.41:1
AA FailAAA Fail
AA大文字 Fail
白文字
14.93:1
AA PassAAA Pass
AA大文字 Pass
黒文字
1.41:1
AA FailAAA Fail
AA大文字 Fail
配色シミュレーター
この色を背景やテキストに使用した場合のプレビューです。見た目の見本のため、読み上げからは省略しています。
背景色として使用
テキスト色として使用
UIコンポーネントでの使用例
色覚シミュレーション
P型(1型)
赤色の感度が低下
#072245
D型(2型)
緑色の感度が低下
#1E2A43
T型(3型)
青色の感度が低下
#491628
配色提案
この色の配色提案は、日本の伝統的な「かさねの色目」や「しきたり」の美意識に基づき、同じ文化圏の伝統色から最も近い調和色を選出しています。
補色
Complementary色相環の反対側に位置する色。最も強いコントラストを生む
#460E44
#003804
類似色
Analogous色相が近い色の組み合わせ。自然で調和的な印象を与える
#460E44
#341858
#510529
トライアド
Triadic色相環を三等分する配色。活力がありバランスの良い組み合わせ
#460E44
#402500
#003648
スプリットコンプリメンタリー
Split-complementary補色の両隣を使う配色。補色より柔らかいコントラスト
#460E44
#253100
#003A2C
テトラディック(正方形)
Tetradic (Square)色相環を四等分する配色。豊かな色彩で華やかな印象
#460E44
#4F1500
#003804
#002E5A
テトラディック(長方形)
Tetradic (Rectangle)二対の補色を組み合わせた配色。多彩ながらまとまりのある配色
#460E44
#550703
#003804
#003648
モノクロマティック
Monochromatic同じ色相で明度・彩度を変えた配色。統一感のある上品な印象
#460E44
#71556F
#200021
#5E315B
ダブルコンプリメンタリー
Double Complementary隣り合う二色とその補色による四色配色。複雑で魅力的な配色
#460E44
#510529
#003804
#003A2C
グラデーション
ティント(明るく)
background: linear-gradient(to right, #460E44, #FFFFFF);#460E44
#6B3E69
#906E8F
#B59FB4
#DACFDA
#FFFFFF
シェード(暗く)
background: linear-gradient(to right, #460E44, #000000);#460E44
#380B36
#2A0829
#1C061B
#0E030E
#000000
透明へ
background: linear-gradient(to right, #460E44, transparent);エクスポート
CSS変数
--color-shikon: #460E44;
--color-shikon-rgb: 70, 14, 68;
--color-shikon-oklch: 28.74% 0.1093 329.5;Sass変数
$color-shikon: #460E44;
$color-shikon-rgb: rgb(70, 14, 68);
$color-shikon-oklch: oklch(28.74% 0.1093 329.5);Tailwind Config
'shikon': '#460E44',SwiftUI
Color(red: 0.275, green: 0.055, blue: 0.267)JSON
{
"name": {
"ja": "紫紺",
"en": "Shikon",
"reading": "しこん"
},
"hex": "#460E44",
"rgb": {
"r": 70,
"g": 14,
"b": 68
},
"cmyk": {
"c": 0,
"m": 80,
"y": 2.9,
"k": 72.5
},
"oklch": {
"l": 28.74,
"c": 0.1093,
"h": 329.5
},
"displayP3": {
"r": 0.2507,
"g": 0.0726,
"b": 0.2576
},
"hsv": {
"h": 302.1,
"s": 80,
"v": 27.5
},
"munsell": ""
}