色名 · #E7D7C6

Fragile Beauty

Fragile Beautyは#E7D7C6：rgb(231 215 198)、hsl(31 41% 84%)、oklch(0.888 0.029 69.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Fragile Beauty color name →

#E7D7C6

oklch(0.888 0.029 69.1)

カラー変換

HEX: #e7d7c6
RGB: rgb(231 215 198)
HSL: hsl(31 41% 84%)
HWB: hwb(31 78% 9%)
OKLCH: oklch(0.888 0.029 69.1)
OKLab: oklab(0.888 0.01 0.027)
CIE Lab: lab(86.96 3.65 10.51)
LCH: lch(86.96 11.13 70.9)
CMYK: cmyk(0% 7% 14% 9%)

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

ティント

E9DBCC
ECDFD1
EEE3D7
F1E7DD
F3EBE2
F5EFE8
F8F3EE
FAF7F3
FDFBF9

シェード

C9BBAC
AB9F92
8F857A
736B62
59524B
403B35
282521
13110E
030202

トーン

DCCEBF
D2C5B8
C7BCB1
BDB3A9
B2ABA2
A8A29B
9E9995
94918E
8A8887

カラーハーモニー

補色 +180°

E7D7C6
Fragile Beauty
CCDCED
≈ Alaskan Skies

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.40:1 · APCA Lc 20

Fail

黒の上

WCAG 14.93:1 · APCA Lc 84

AAA

最適な文字色: #000000

WCAG 14.93:1 (AAA) · APCA Lc 84

Contrast pairs

コードスニペット

CSS

:root {
  --fragile-beauty: #e7d7c6;
  --fragile-beauty-rgb: 231 215 198;
  --fragile-beauty-oklch: oklch(0.888 0.029 69.1);
}

.element {
  color: var(--fragile-beauty);
  background-color: hsl(31 41% 84%);
  border-color: oklch(0.888 0.029 69.1);
}

Tailwind CSS v4

@theme {
  --color-fragile-beauty: #e7d7c6;
  --color-fragile-beauty-50: #fbf4ec;
  --color-fragile-beauty-100: #eee6de;
  --color-fragile-beauty-200: #dcd2c7;
  --color-fragile-beauty-300: #c1b5a8;
  --color-fragile-beauty-400: #aa9c8c;
  --color-fragile-beauty-500: #938372;
  --color-fragile-beauty-600: #7c6f61;
  --color-fragile-beauty-700: #64594d;
  --color-fragile-beauty-800: #494138;
  --color-fragile-beauty-900: #332d26;
  --color-fragile-beauty-950: #1f1a15;
}

SCSS

$fragile-beauty: #e7d7c6;
$fragile-beauty-rgb: 231, 215, 198;
$fragile-beauty-light: mix(#fff, $fragile-beauty, 20%);
$fragile-beauty-dark: mix(#000, $fragile-beauty, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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