コバルトバイオレット

Cobalt Violet

西洋の伝統色紫系

色コードの出典:Cobalt violet - Wikipedia

コバルトバイオレット紫系バイオレット無機顔料リン酸コバルト西洋の色

広色域（Display P3）比較

sRGB（従来のWeb標準）

#904684

Display P3（広色域）

color(display-p3 0.527405 0.290181 0.50558)

意味と歴史

由来

コバルトバイオレットは、化学式Co3(PO4)2で表される無機化合物であるリン酸コバルトに由来する色名である。この化合物は水に不溶な紫色の固体である。

出典（1件）

Cobalt violet - Wikipedia

CSSコード

HEX

#904684

RGB

rgb(144, 70, 132)

CMYK

cmyk(0%, 51.39%, 8.33%, 43.53%)

HSV

hsv(309.7, 51.39%, 56.47%)

OKLCH

oklch(50.93% 0.128 333.75)

Display P3

color(display-p3 0.527405 0.290181 0.50558)

Munsell

CIE XYZ

XYZ(0.17857, 0.11977, 0.23197)

CIE L*a*b*

Lab(41.179091, 39.905726, -20.864865)

CIE LCH(ab)

LCH(41.179091, 45.031206, 332.397005°)

CIE L*u*v*

Luv(41.179091, 37.246894, -34.674977)

Hunter Lab

Hunter Lab(34.607393, 0.339179, -0.180683)

xyY

xyY(0.336727, 0.225849, 0.11977)

JzAzBz

JzAzBz(0.00514, 0.005644, -0.003561)

JzCzHz

JzCzHz(0.00514, 0.006674, 327.75208°)

フォールバック付きCSS

.element {
  /* sRGBフォールバック */
  background-color: #904684;
  background-color: oklch(50.93% 0.128 333.75);
}

@media (color-gamut: p3) {
  .element {
    background-color: color(display-p3 0.527405 0.290181 0.50558);
  }
}

コントラストチェッカー

WCAG 2.1 基準に基づくコントラスト比を表示します。

白背景

6.19:1

AA PassAAA Fail

AA大文字 Pass

黒背景

3.40:1

AA FailAAA Fail

AA大文字 Pass

白文字

6.19:1

AA PassAAA Fail

AA大文字 Pass

黒文字

3.40:1

AA FailAAA Fail

AA大文字 Pass

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。見た目の見本のため、読み上げからは省略しています。

背景色として使用

テキスト色として使用

UIコンポーネントでの使用例

色覚シミュレーション

P型（1型）

赤色の感度が低下

#455A86

D型（2型）

緑色の感度が低下

#5A6582

T型（3型）

青色の感度が低下

#964A5F

配色提案

この配色はルネサンス以降の西洋色彩理論と、イッテン・マンセルの色彩調和論に基づく古典的な配色原理を適用しています。

補色

Complementary

色相環の反対側に位置する色。最も強いコントラストを生む

#904684

#037A42

類似色

Analogous

色相が近い色の組み合わせ。自然で調和的な印象を与える

#904684

#7650A1

#9F415E

トライアド

Triadic

色相環を三等分する配色。活力がありバランスの良い組み合わせ

#904684

#7E6300

#007792

スプリットコンプリメンタリー

Split-complementary

補色の両隣を使う配色。補色より柔らかいコントラスト

#904684

#577100

#007C6E

テトラディック（正方形）

Tetradic (Square)

色相環を四等分する配色。豊かな色彩で華やかな印象

#904684

#975200

#037A42

#006BA9

テトラディック（長方形）

Tetradic (Rectangle)

二対の補色を組み合わせた配色。多彩ながらまとまりのある配色

#904684

#A24531

#037A42

#007792

モノクロマティック

Monochromatic

同じ色相で明度・彩度を変えた配色。統一感のある上品な印象

#904684

#BB93B2

#68075D

#A86B9D

ダブルコンプリメンタリー

Double Complementary

隣り合う二色とその補色による四色配色。複雑で魅力的な配色

#904684

#9F415E

#037A42

#007C6E

伝統的な配色の提案

同じ文化圏の伝統色から、色彩理論的に調和する色を選出しました。

グラデーション

ティント（明るく）

background: linear-gradient(to right, #904684, #FFFFFF);

#904684

#A66B9D

#BC90B5

#D3B5CE

#E9DAE6

#FFFFFF

シェード（暗く）

background: linear-gradient(to right, #904684, #000000);

#904684

#73386A

#562A4F

#3A1C35

#1D0E1A

#000000

透明へ

background: linear-gradient(to right, #904684, transparent);

エクスポート

CSS変数

--color-cobalt_violet: #904684;
--color-cobalt_violet-rgb: 144, 70, 132;
--color-cobalt_violet-oklch: 50.93% 0.128 333.75;

Sass変数

$color-cobalt_violet: #904684;
$color-cobalt_violet-rgb: rgb(144, 70, 132);
$color-cobalt_violet-oklch: oklch(50.93% 0.128 333.75);

Tailwind Config

'cobalt_violet': '#904684',

SwiftUI

Color(red: 0.565, green: 0.275, blue: 0.518)

JSON

{
  "name": {
    "ja": "コバルトバイオレット",
    "en": "Cobalt Violet"
  },
  "hex": "#904684",
  "rgb": {
    "r": 144,
    "g": 70,
    "b": 132
  },
  "cmyk": {
    "c": 0,
    "m": 51.39,
    "y": 8.33,
    "k": 43.53
  },
  "oklch": {
    "l": 50.93,
    "c": 0.128,
    "h": 333.75
  },
  "displayP3": {
    "r": 0.527405,
    "g": 0.290181,
    "b": 0.50558
  },
  "hsv": {
    "h": 309.7,
    "s": 51.39,
    "v": 56.47
  },
  "munsell": ""
}