色名 · #C6BEDD

Purple Dragon

Purple Dragonは#C6BEDD：rgb(198 190 221)、hsl(255 31% 81%)、oklch(0.818 0.044 297.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Purple mean? → · Purple Dragon color name →

#C6BEDD

oklch(0.818 0.044 297.2)

カラー変換

HEX: #c6bedd
RGB: rgb(198 190 221)
HSL: hsl(255 31% 81%)
HWB: hwb(255 75% 13%)
OKLCH: oklch(0.818 0.044 297.2)
OKLab: oklab(0.818 0.02 -0.039)
CIE Lab: lab(78.38 7.35 -14.51)
LCH: lch(78.38 16.26 296.9)
CMYK: cmyk(10% 14% 0% 13%)

ティント · シェード · トーン

ティント

CCC4E0
D1CBE4
D7D1E7
DCD8EB
E2DEEE
E8E5F2
EEEBF5
F3F2F8
F9F8FC

シェード

ACA5C0
928CA4
7A7588
625E6E
4B4855
35333D
211F26
0E0D11
020202

トーン

BFB8D3
B8B1CA
B0ABC0
A9A5B7
A29FAE
9B98A4
94929B
8E8C92
878689

カラーハーモニー

補色 +180°

C6BEDD
Purple Dragon
C1C8A8
≈ Rejuvenate

類似色 -30° +30°

トライアド +120° +240°

スプリットコンプリメンタリー +150° +210°

テトラード +90° +180° +270°

コントラストとアクセシビリティ

白の上

WCAG 1.77:1 · APCA Lc 33

Fail

黒の上

WCAG 11.81:1 · APCA Lc 70

AAA

最適な文字色: #000000

WCAG 11.81:1 (AAA) · APCA Lc 70

Contrast pairs

コードスニペット

CSS

:root {
  --purple-dragon: #c6bedd;
  --purple-dragon-rgb: 198 190 221;
  --purple-dragon-oklch: oklch(0.818 0.044 297.2);
}

.element {
  color: var(--purple-dragon);
  background-color: hsl(255 31% 81%);
  border-color: oklch(0.818 0.044 297.2);
}

Tailwind CSS v4

@theme {
  --color-purple-dragon: #c6bedd;
  --color-purple-dragon-50: #f7f3ff;
  --color-purple-dragon-100: #eae5f5;
  --color-purple-dragon-200: #d6d0e5;
  --color-purple-dragon-300: #bab3cb;
  --color-purple-dragon-400: #a199b6;
  --color-purple-dragon-500: #8980a0;
  --color-purple-dragon-600: #746d87;
  --color-purple-dragon-700: #5d576c;
  --color-purple-dragon-800: #434050;
  --color-purple-dragon-900: #2e2c38;
  --color-purple-dragon-950: #1b1922;
}

SCSS

$purple-dragon: #c6bedd;
$purple-dragon-rgb: 198, 190, 221;
$purple-dragon-light: mix(#fff, $purple-dragon, 20%);
$purple-dragon-dark: mix(#000, $purple-dragon, 20%);

.element {
  color: $purple-dragon;
  box-shadow: 0 0 0 2px rgba($purple-dragon, 0.35);
}

近い色名

Palettes with similar colors

ツールで開く

ピッカーペアコントラストチェッカー Studio JSON API