色名 · #F7EEDB

Home Plate

Home Plateは#F7EEDB：rgb(247 238 219)、hsl(41 64% 91%)、oklch(0.951 0.027 85.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Home Plate color name →

#F7EEDB

oklch(0.951 0.027 85.7)

カラー変換

HEX: #f7eedb
RGB: rgb(247 238 219)
HSL: hsl(41 64% 91%)
HWB: hwb(41 86% 3%)
OKLCH: oklch(0.951 0.027 85.7)
OKLab: oklab(0.951 0.002 0.027)
CIE Lab: lab(94.43 0.81 10.37)
LCH: lch(94.43 10.4 85.6)
CMYK: cmyk(0% 4% 11% 3%)

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

ティント

F8F0DF
F9F1E2
F9F3E6
FAF5E9
FBF7ED
FCF8F1
FDFAF4
FDFCF8
FEFDFB

シェード

D7CFBE
B7B1A2
999387
7C776D
605C54
45423C
2C2A26
151411
030302

トーン

EAE2D2
DED7C8
D2CCBF
C6C1B6
BAB5AC
AEABA3
A2A09A
979592
8B8A89

カラーハーモニー

補色 +180°

F7EEDB
Home Plate
E7EFFF
≈ Brilliant White

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.15:1 · APCA Lc 0

Fail

黒の上

WCAG 18.20:1 · APCA Lc 97

AAA

最適な文字色: #000000

WCAG 18.20:1 (AAA) · APCA Lc 97

Contrast pairs

コードスニペット

CSS

:root {
  --home-plate: #f7eedb;
  --home-plate-rgb: 247 238 219;
  --home-plate-oklch: oklch(0.951 0.027 85.7);
}

.element {
  color: var(--home-plate);
  background-color: hsl(41 64% 91%);
  border-color: oklch(0.951 0.027 85.7);
}

Tailwind CSS v4

@theme {
  --color-home-plate: #f7eedb;
  --color-home-plate-50: #f8f5ed;
  --color-home-plate-100: #ece7de;
  --color-home-plate-200: #d9d4c8;
  --color-home-plate-300: #bdb7a8;
  --color-home-plate-400: #a69e8d;
  --color-home-plate-500: #8e8572;
  --color-home-plate-600: #787161;
  --color-home-plate-700: #605a4d;
  --color-home-plate-800: #474238;
  --color-home-plate-900: #312d26;
  --color-home-plate-950: #1d1a15;
}

SCSS

$home-plate: #f7eedb;
$home-plate-rgb: 247, 238, 219;
$home-plate-light: mix(#fff, $home-plate, 20%);
$home-plate-dark: mix(#000, $home-plate, 20%);

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

近い色名

Palettes with this color

Pure Frappé au Chocolat KilnYellow · Warm

Palettes with similar colors

ツールで開く

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