色名 · #DAD7C8

Fennec Fox

Fennec Foxは#DAD7C8：rgb(218 215 200)、hsl(50 20% 82%)、oklch(0.877 0.02 97.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Fennec Fox color name →

#DAD7C8

oklch(0.877 0.02 97.6)

カラー変換

HEX: #dad7c8
RGB: rgb(218 215 200)
HSL: hsl(50 20% 82%)
HWB: hwb(50 78% 15%)
OKLCH: oklch(0.877 0.02 97.6)
OKLab: oklab(0.877 -0.003 0.02)
CIE Lab: lab(85.91 -0.86 7.81)
LCH: lch(85.91 7.86 96.3)
CMYK: cmyk(0% 1% 8% 15%)

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

ティント

DEDBCD
E1DFD3
E5E3D8
E9E7DE
ECEBE3
F0EFE9
F4F3EE
F8F7F4
FBFBF9

シェード

BDBBAE
A29F94
87857B
6C6B63
54524C
3C3B36
252521
11110F
020202

トーン

D1CEC1
C7C5B9
BEBCB2
B5B3AB
ACAAA3
A3A29C
9A9995
91918E
898887

カラーハーモニー

補色 +180°

DAD7C8
Fennec Fox
D3D6E4
≈ Violet Water

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.44:1 · APCA Lc 21

Fail

黒の上

WCAG 14.53:1 · APCA Lc 82

AAA

最適な文字色: #000000

WCAG 14.53:1 (AAA) · APCA Lc 82

Contrast pairs

コードスニペット

CSS

:root {
  --fennec-fox: #dad7c8;
  --fennec-fox-rgb: 218 215 200;
  --fennec-fox-oklch: oklch(0.877 0.02 97.6);
}

.element {
  color: var(--fennec-fox);
  background-color: hsl(50 20% 82%);
  border-color: oklch(0.877 0.02 97.6);
}

Tailwind CSS v4

@theme {
  --color-fennec-fox: #dad7c8;
  --color-fennec-fox-50: #f6f5ef;
  --color-fennec-fox-100: #e9e8e0;
  --color-fennec-fox-200: #d6d5cb;
  --color-fennec-fox-300: #bab8ac;
  --color-fennec-fox-400: #a19f91;
  --color-fennec-fox-500: #8a8777;
  --color-fennec-fox-600: #747265;
  --color-fennec-fox-700: #5d5b51;
  --color-fennec-fox-800: #44423b;
  --color-fennec-fox-900: #2f2e28;
  --color-fennec-fox-950: #1c1b16;
}

SCSS

$fennec-fox: #dad7c8;
$fennec-fox-rgb: 218, 215, 200;
$fennec-fox-light: mix(#fff, $fennec-fox, 20%);
$fennec-fox-dark: mix(#000, $fennec-fox, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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