色名 · #99CCEE

Fail Whale

Fail Whaleは#99CCEE：rgb(153 204 238)、hsl(204 71% 77%)、oklch(0.821 0.072 238)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Blue mean? → · Fail Whale color name →

#99CCEE

oklch(0.821 0.072 238)

カラー変換

HEX: #99ccee
RGB: rgb(153 204 238)
HSL: hsl(204 71% 77%)
HWB: hwb(204 60% 7%)
OKLCH: oklch(0.821 0.072 238)
OKLab: oklab(0.821 -0.038 -0.061)
CIE Lab: lab(79.36 -11.02 -22.51)
LCH: lch(79.36 25.06 243.9)
CMYK: cmyk(36% 14% 0% 7%)

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

ティント

A3D1F0
AED6F2
B8DBF4
C2E1F5
CCE6F7
D7EBF9
E1F0FA
EBF5FC
F5FAFD

シェード

84B1CF
7097B1
5D7E93
4A6577
384E5C
273742
17222A
080F14
010203

トーン

97C4E3
95BCD7
92B5CC
90ADC1
8EA5B6
8B9EAB
8896A0
868F95
83878B

カラーハーモニー

補色 +180°

99CCEE
Fail Whale
E9BA97
≈ Fresh Praline

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.71:1 · APCA Lc 31

Fail

黒の上

WCAG 12.22:1 · APCA Lc 72

AAA

最適な文字色: #000000

WCAG 12.22:1 (AAA) · APCA Lc 72

Contrast pairs

コードスニペット

CSS

:root {
  --fail-whale: #99ccee;
  --fail-whale-rgb: 153 204 238;
  --fail-whale-oklch: oklch(0.821 0.072 238);
}

.element {
  color: var(--fail-whale);
  background-color: hsl(204 71% 77%);
  border-color: oklch(0.821 0.072 238);
}

Tailwind CSS v4

@theme {
  --color-fail-whale: #99ccee;
  --color-fail-whale-50: #e4f9ff;
  --color-fail-whale-100: #d3ecfe;
  --color-fail-whale-200: #b9d9f0;
  --color-fail-whale-300: #97bdd9;
  --color-fail-whale-400: #76a5c4;
  --color-fail-whale-500: #568db0;
  --color-fail-whale-600: #4a7795;
  --color-fail-whale-700: #3b6077;
  --color-fail-whale-800: #294658;
  --color-fail-whale-900: #1b313d;
  --color-fail-whale-950: #0b1d27;
}

SCSS

$fail-whale: #99ccee;
$fail-whale-rgb: 153, 204, 238;
$fail-whale-light: mix(#fff, $fail-whale, 20%);
$fail-whale-dark: mix(#000, $fail-whale, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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