色名 · #F2EEC7

Home Song

Home Songは#F2EEC7：rgb(242 238 199)、hsl(54 62% 86%)、oklch(0.942 0.051 102.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Yellow mean? → · Home Song color name →

#F2EEC7

oklch(0.942 0.051 102.5)

カラー変換

HEX: #f2eec7
RGB: rgb(242 238 199)
HSL: hsl(54 62% 86%)
HWB: hwb(54 78% 5%)
OKLCH: oklch(0.942 0.051 102.5)
OKLab: oklab(0.942 -0.011 0.05)
CIE Lab: lab(93.67 -3.26 19.48)
LCH: lch(93.67 19.75 99.5)
CMYK: cmyk(0% 2% 18% 5%)

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

ティント

F3F0CD
F5F1D2
F6F3D8
F7F5DE
F8F7E3
FAF8E9
FBFAEE
FCFCF4
FEFDF9

シェード

D2CFAD
B4B193
96937A
797762
5E5C4C
434236
2B2A21
14140E
030302

トーン

E6E2C0
DAD7B9
CECCB1
C3C1AA
B7B6A3
ACAB9C
A1A095
96958E
8B8A87

カラーハーモニー

補色 +180°

F2EEC7
Home Song
E9EAFF
≈ Glitter

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.17:1 · APCA Lc 9

Fail

黒の上

WCAG 17.82:1 · APCA Lc 96

AAA

最適な文字色: #000000

WCAG 17.82:1 (AAA) · APCA Lc 96

Contrast pairs

コードスニペット

CSS

:root {
  --home-song: #f2eec7;
  --home-song-rgb: 242 238 199;
  --home-song-oklch: oklch(0.942 0.051 102.5);
}

.element {
  color: var(--home-song);
  background-color: hsl(54 62% 86%);
  border-color: oklch(0.942 0.051 102.5);
}

Tailwind CSS v4

@theme {
  --color-home-song: #f2eec7;
  --color-home-song-50: #f7f6e6;
  --color-home-song-100: #eae9d6;
  --color-home-song-200: #d7d6bd;
  --color-home-song-300: #bbb99b;
  --color-home-song-400: #a4a07d;
  --color-home-song-500: #8c8860;
  --color-home-song-600: #777352;
  --color-home-song-700: #5f5c41;
  --color-home-song-800: #46432e;
  --color-home-song-900: #312e1f;
  --color-home-song-950: #1d1b0f;
}

SCSS

$home-song: #f2eec7;
$home-song-rgb: 242, 238, 199;
$home-song-light: mix(#fff, $home-song, 20%);
$home-song-dark: mix(#000, $home-song, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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