色名 · #4455EE

Qing Dynasty Dragon

Qing Dynasty Dragonは#4455EE：rgb(68 85 238)、hsl(234 83% 60%)、oklch(0.536 0.228 271.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Blue mean? → · Qing Dynasty Dragon color name →

#4455EE

oklch(0.536 0.228 271.3)

カラー変換

HEX: #4455ee
RGB: rgb(68 85 238)
HSL: hsl(234 83% 60%)
HWB: hwb(234 27% 7%)
OKLCH: oklch(0.536 0.228 271.3)
OKLab: oklab(0.536 0.005 -0.227)
CIE Lab: lab(42.74 33.91 -80.58)
LCH: lch(42.74 87.42 292.8)
CMYK: cmyk(71% 64% 0% 7%)

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

ティント

5269F2
637CF5
748EF8
869FFA
99AFFC
ADBFFE
C1CFFF
D5DFFF
EAEFFF

シェード

3A49CF
303DB1
263193
1D2677
141C5C
0C1142
05082A
020214
000003

トーン

485CE4
4D63D9
5368CF
586DC4
5F71BA
6575AF
6C78A4
727B98
797E8C

カラーハーモニー

補色 +180°

4455EE
Qing Dynasty Dragon
856A00
≈ Muddy Brown

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 5.55:1 · APCA Lc 77

黒の上

WCAG 3.77:1 · APCA Lc 25

Fail

最適な文字色: #FFFFFF

WCAG 5.55:1 (AA) · APCA Lc 77

Contrast pairs

コードスニペット

CSS

:root {
  --qing-dynasty-dragon: #4455ee;
  --qing-dynasty-dragon-rgb: 68 85 238;
  --qing-dynasty-dragon-oklch: oklch(0.536 0.228 271.3);
}

.element {
  color: var(--qing-dynasty-dragon);
  background-color: hsl(234 83% 60%);
  border-color: oklch(0.536 0.228 271.3);
}

Tailwind CSS v4

@theme {
  --color-qing-dynasty-dragon: #4455ee;
  --color-qing-dynasty-dragon-50: #e0f2ff;
  --color-qing-dynasty-dragon-100: #cfe3ff;
  --color-qing-dynasty-dragon-200: #b5cdff;
  --color-qing-dynasty-dragon-300: #93abff;
  --color-qing-dynasty-dragon-400: #708eff;
  --color-qing-dynasty-dragon-500: #566cff;
  --color-qing-dynasty-dragon-600: #495ded;
  --color-qing-dynasty-dragon-700: #3a4abf;
  --color-qing-dynasty-dragon-800: #25378f;
  --color-qing-dynasty-dragon-900: #182666;
  --color-qing-dynasty-dragon-950: #0a1346;
}

SCSS

$qing-dynasty-dragon: #4455ee;
$qing-dynasty-dragon-rgb: 68, 85, 238;
$qing-dynasty-dragon-light: mix(#fff, $qing-dynasty-dragon, 20%);
$qing-dynasty-dragon-dark: mix(#000, $qing-dynasty-dragon, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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