コバルトバイオレット

Cobalt Violet

西洋の伝統色紫系

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

広色域（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 Pass AAA Fail

AA大文字 Pass

サンプル

黒背景

3.40:1

AA Fail AAA Fail

AA大文字 Pass

サンプル

白文字

6.19:1

AA Pass AAA Fail

AA大文字 Pass

サンプル

黒文字

3.40:1

AA Fail AAA Fail

AA大文字 Pass

配色シミュレーター

この色を背景やテキストに使用した場合のプレビューです。

背景色として使用

白テキスト — The quick brown fox

黒テキスト — The quick brown fox

色の上にテキストを配置した場合の可読性を確認できます。見出し・本文・リンクなど、さまざまなサイズで試してみてください。

テキスト色として使用

白背景 — 見出しテキスト

本文テキストのサンプルです。The quick brown fox jumps over the lazy dog.

黒背景 — 見出しテキスト

本文テキストのサンプルです。The quick brown fox jumps over the lazy dog.

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

バッジ

色覚シミュレーション

P型（1型）

赤色の感度が低下

#455A86

D型（2型）

緑色の感度が低下

#5A6582

T型（3型）

青色の感度が低下

#964A5F

配色提案

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

補色

Complementary

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

#904684

#FFFFFF

類似色

Analogous

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

#904684

#FFFFFF

トライアド

Triadic

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

#904684

#FFFFFF

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

Split-complementary

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

#904684

#FFFFFF

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

Tetradic (Square)

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

#904684

#FFFFFF

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

Tetradic (Rectangle)

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

#904684

#FFFFFF

モノクロマティック

Monochromatic

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

#904684

#FFDFFF

#FFFFFF

#FFD5FF

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

Double Complementary

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

#904684

#FFFFFF

グラデーション

ティント（明るく）

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": ""
}