色名 · #DFD4CC

Rose Pearl

Rose Pearlは#DFD4CC：rgb(223 212 204)、hsl(25 23% 84%)、oklch(0.877 0.016 58.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Rose Pearl color name →

#DFD4CC

oklch(0.877 0.016 58.6)

カラー変換

HEX: #dfd4cc
RGB: rgb(223 212 204)
HSL: hsl(25 23% 84%)
HWB: hwb(25 80% 13%)
OKLCH: oklch(0.877 0.016 58.6)
OKLab: oklab(0.877 0.009 0.014)
CIE Lab: lab(85.64 2.91 5.4)
LCH: lch(85.64 6.13 61.7)
CMYK: cmyk(0% 5% 9% 13%)

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

ティント

E2D8D1
E5DCD6
E9E1DB
ECE5E0
EFE9E5
F2EEEA
F5F2F0
F9F6F5
FCFBFA

シェード

C2B8B1
A59D97
8A837E
6F6965
56514E
3D3A37
272422
12100F
020202

トーン

D5CBC4
CBC3BC
C2BAB5
B8B1AD
AEA9A5
A5A19E
9B9896
92908F
898887

カラーハーモニー

補色 +180°

DFD4CC
Rose Pearl
CDD8E0
≈ Blue Gossamer

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.45:1 · APCA Lc 22

Fail

黒の上

WCAG 14.42:1 · APCA Lc 82

AAA

最適な文字色: #000000

WCAG 14.42:1 (AAA) · APCA Lc 82

Contrast pairs

コードスニペット

CSS

:root {
  --rose-pearl: #dfd4cc;
  --rose-pearl-rgb: 223 212 204;
  --rose-pearl-oklch: oklch(0.877 0.016 58.6);
}

.element {
  color: var(--rose-pearl);
  background-color: hsl(25 23% 84%);
  border-color: oklch(0.877 0.016 58.6);
}

Tailwind CSS v4

@theme {
  --color-rose-pearl: #dfd4cc;
  --color-rose-pearl-50: #f9f4f0;
  --color-rose-pearl-100: #ece7e2;
  --color-rose-pearl-200: #dad3cd;
  --color-rose-pearl-300: #beb6af;
  --color-rose-pearl-400: #a69c95;
  --color-rose-pearl-500: #8f847c;
  --color-rose-pearl-600: #797069;
  --color-rose-pearl-700: #615954;
  --color-rose-pearl-800: #47413d;
  --color-rose-pearl-900: #312d2a;
  --color-rose-pearl-950: #1d1a17;
}

SCSS

$rose-pearl: #dfd4cc;
$rose-pearl-rgb: 223, 212, 204;
$rose-pearl-light: mix(#fff, $rose-pearl, 20%);
$rose-pearl-dark: mix(#000, $rose-pearl, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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