色名 · #774433
Clay Play
Clay Playは#774433：rgb(119 68 51)、hsl(15 40% 33%)、oklch(0.444 0.076 39.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Brown mean? → · Clay Play color name →
#774433
oklch(0.444 0.076 39.1)
カラー変換
- HEX
- #774433
- RGB
- rgb(119 68 51)
- HSL
- hsl(15 40% 33%)
- HWB
- hwb(15 20% 53%)
- OKLCH
- oklch(0.444 0.076 39.1)
- OKLab
- oklab(0.444 0.059 0.048)
- CIE Lab
- lab(34.9 21.2 20.19)
- LCH
- lch(34.9 29.27 43.6)
- CMYK
- cmyk(0% 43% 57% 53%)
ティント · シェード · トーン
ティント
- 855546
- 926759
- A0796C
- AE8B80
- BB9E94
- C9B1A9
- D6C4BE
- E4D7D3
- F1EBE9
シェード
- 673A2B
- 573023
- 47261C
- 381D14
- 2A140D
- 1C0C07
- 100503
- 050201
- 010000
トーン
- 794A3B
- 7A5042
- 7B564A
- 7C5C52
- 7D6259
- 7E6861
- 7F6E69
- 7F7470
- 807A78
カラーハーモニー
補色 +180°
- 774433
Clay Play
- 0E5D70
≈ Deep Blue Sea
類似色 -30° +30°
- 774433
Clay Play
- 77414B
≈ Berry Bush
- 6F4B20
≈ Vintage Wood
トライアド +120° +240°
- 774433
Clay Play
- 286044
≈ Green Pea
- 4B4F7D
≈ Roman Violet
スプリットコンプリメンタリー +150° +210°
- 774433
Clay Play
- 04615C
≈ Empress Teal
- 30567C
≈ Breonne Blue
テトラード +90° +180° +270°
- 774433
Clay Play
- 465C2C
≈ Woodman
- 0E5D70
≈ Deep Blue Sea
- 604773
≈ Gengiana
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.89:1 · APCA Lc 87
Ag
Fail黒の上
WCAG 2.65:1 · APCA Lc 15
最適な文字色: #FFFFFF
WCAG 7.89:1 (AAA) · APCA Lc 87
Contrast pairs
コードスニペット
CSS
:root {
--clay-play: #774433;
--clay-play-rgb: 119 68 51;
--clay-play-oklch: oklch(0.444 0.076 39.1);
}
.element {
color: var(--clay-play);
background-color: hsl(15 40% 33%);
border-color: oklch(0.444 0.076 39.1);
}Tailwind CSS v4
@theme {
--color-clay-play: #774433;
--color-clay-play-50: #ffefe5;
--color-clay-play-100: #ffe0d5;
--color-clay-play-200: #f2cabc;
--color-clay-play-300: #daab9a;
--color-clay-play-400: #c68f7d;
--color-clay-play-500: #b27560;
--color-clay-play-600: #966352;
--color-clay-play-700: #784f41;
--color-clay-play-800: #59392f;
--color-clay-play-900: #3f2720;
--color-clay-play-950: #281510;
}SCSS
$clay-play: #774433;
$clay-play-rgb: 119, 68, 51;
$clay-play-light: mix(#fff, $clay-play, 20%);
$clay-play-dark: mix(#000, $clay-play, 20%);
.element {
color: $clay-play;
box-shadow: 0 0 0 2px rgba($clay-play, 0.35);
}