色名 · #DCA356
Pan de Coco
Pan de Cocoは#DCA356：rgb(220 163 86)、hsl(34 66% 60%)、oklch(0.754 0.116 72.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Pan de Coco color name →
#DCA356
oklch(0.754 0.116 72.7)
カラー変換
- HEX
- #dca356
- RGB
- rgb(220 163 86)
- HSL
- hsl(34 66% 60%)
- HWB
- hwb(34 34% 14%)
- OKLCH
- oklch(0.754 0.116 72.7)
- OKLab
- oklab(0.754 0.034 0.111)
- CIE Lab
- lab(71.38 15.86 47.88)
- LCH
- lch(71.38 50.44 71.7)
- CMYK
- cmyk(0% 26% 61% 14%)
ティント · シェード · トーン
ティント
- E0AC69
- E4B67B
- E7BF8C
- EBC89D
- EFD1AD
- F2DABE
- F5E4CE
- F9EDDE
- FCF6EF
シェード
- BF8D4A
- A3783E
- 886332
- 6E4F27
- 543C1C
- 3C2A12
- 261908
- 110A02
- 020100
トーン
- D3A05C
- C99C62
- C09967
- B7966C
- AE9270
- A58F74
- 9B8B77
- 92877A
- 89847D
カラーハーモニー
補色 +180°
- DCA356
Pan de Coco
- 78B3F7
≈ French Sky Blue
類似色 -30° +30°
- DCA356
Pan de Coco
- ED9673
≈ Pochard Duck Head
- BDB255
≈ Tarpon Green
トライアド +120° +240°
- DCA356
Pan de Coco
- 3AC6C3
≈ Swimmers Pool
- C999E4
≈ Somewhere in a Fairytale
スプリットコンプリメンタリー +150° +210°
- DCA356
Pan de Coco
- 4ABFE4
≈ Clean Pool
- A5A6F7
≈ Shy Moment
テトラード +90° +180° +270°
- DCA356
Pan de Coco
- 61C69A
≈ Intense Jade
- 78B3F7
≈ French Sky Blue
- E291C3
≈ Firm Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.23:1 · APCA Lc 44
Ag
AAA黒の上
WCAG 9.41:1 · APCA Lc 58
最適な文字色: #000000
WCAG 9.41:1 (AAA) · APCA Lc 58
Contrast pairs
コードスニペット
CSS
:root {
--pan-de-coco: #dca356;
--pan-de-coco-rgb: 220 163 86;
--pan-de-coco-oklch: oklch(0.754 0.116 72.7);
}
.element {
color: var(--pan-de-coco);
background-color: hsl(34 66% 60%);
border-color: oklch(0.754 0.116 72.7);
}Tailwind CSS v4
@theme {
--color-pan-de-coco: #dca356;
--color-pan-de-coco-50: #fff1d1;
--color-pan-de-coco-100: #ffe3be;
--color-pan-de-coco-200: #f2ce9d;
--color-pan-de-coco-300: #dbaf73;
--color-pan-de-coco-400: #c8934b;
--color-pan-de-coco-500: #b47812;
--color-pan-de-coco-600: #986615;
--color-pan-de-coco-700: #7a5111;
--color-pan-de-coco-800: #5b3a0b;
--color-pan-de-coco-900: #402807;
--color-pan-de-coco-950: #291600;
}SCSS
$pan-de-coco: #dca356;
$pan-de-coco-rgb: 220, 163, 86;
$pan-de-coco-light: mix(#fff, $pan-de-coco, 20%);
$pan-de-coco-dark: mix(#000, $pan-de-coco, 20%);
.element {
color: $pan-de-coco;
box-shadow: 0 0 0 2px rgba($pan-de-coco, 0.35);
}