色名 · #EBCF7D

Choux à la Crème

Choux à la Crèmeは#EBCF7D：rgb(235 207 125)、hsl(45 73% 71%)、oklch(0.861 0.106 91.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Yellow mean? → · Choux à la Crème color name →

#EBCF7D

oklch(0.861 0.106 91.2)

カラー変換

HEX: #ebcf7d
RGB: rgb(235 207 125)
HSL: hsl(45 73% 71%)
HWB: hwb(45 49% 8%)
OKLCH: oklch(0.861 0.106 91.2)
OKLab: oklab(0.861 -0.002 0.106)
CIE Lab: lab(84.2 2.39 44.31)
LCH: lch(84.2 44.38 86.9)
CMYK: cmyk(0% 12% 47% 8%)

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

ティント

EDD48B
EFD999
F1DEA6
F3E3B3
F5E7C0
F7ECCD
F9F1DA
FBF6E6
FDFAF3

シェード

CCB46C
AE995B
917F4B
75673B
5B4F2C
41381E
292311
131005
030201

トーン

E0C77F
D5BF80
CAB781
BFAF81
B4A782
A99F82
9F9782
949081
8A8881

カラーハーモニー

補色 +180°

EBCF7D
Choux à la Crème
C0CFFF
≈ Lavender Blue

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.52:1 · APCA Lc 24

Fail

黒の上

WCAG 13.75:1 · APCA Lc 79

AAA

最適な文字色: #000000

WCAG 13.75:1 (AAA) · APCA Lc 79

Contrast pairs

コードスニペット

CSS

:root {
  --choux-a-la-creme: #ebcf7d;
  --choux-a-la-creme-rgb: 235 207 125;
  --choux-a-la-creme-oklch: oklch(0.861 0.106 91.2);
}

.element {
  color: var(--choux-a-la-creme);
  background-color: hsl(45 73% 71%);
  border-color: oklch(0.861 0.106 91.2);
}

Tailwind CSS v4

@theme {
  --color-choux-a-la-creme: #ebcf7d;
  --color-choux-a-la-creme-50: #fff5d3;
  --color-choux-a-la-creme-100: #f4e8c0;
  --color-choux-a-la-creme-200: #e4d4a1;
  --color-choux-a-la-creme-300: #cab777;
  --color-choux-a-la-creme-400: #b69c4f;
  --color-choux-a-la-creme-500: #a0831e;
  --color-choux-a-la-creme-600: #876f1d;
  --color-choux-a-la-creme-700: #6d5917;
  --color-choux-a-la-creme-800: #51400e;
  --color-choux-a-la-creme-900: #382c09;
  --color-choux-a-la-creme-950: #231900;
}

SCSS

$choux-a-la-creme: #ebcf7d;
$choux-a-la-creme-rgb: 235, 207, 125;
$choux-a-la-creme-light: mix(#fff, $choux-a-la-creme, 20%);
$choux-a-la-creme-dark: mix(#000, $choux-a-la-creme, 20%);

.element {
  color: $choux-a-la-creme;
  box-shadow: 0 0 0 2px rgba($choux-a-la-creme, 0.35);
}

近い色名

Palettes with similar colors

ツールで開く

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