Oak カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Oak palette

カラーインスピレーション

実際のデザインでこのカラーパレットを紹介する画像

このパレットを共有する先：

Oak カラーパレット (PNG) をダウンロード

Download oak color palette PNG image (landscape)
Download oak color palette PNG image (square)

Oak カラーパレット CSS

/* CSS */
.color-1 {
color: #c3b192;
}
.color-2 {
color: #a77d52;
}
.color-3 {
color: #8e5b3e;
}
.color-4 {
color: #683c27;
}
.color-5 {
color: #4e2b1d;
}

/* CSS Variables */
:root {
--color-1: #c3b192;
 --color-2: #a77d52;
 --color-3: #8e5b3e;
 --color-4: #683c27;
 --color-5: #4e2b1d;
 }

Oak の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #c3b192, #a77d52, #8e5b3e, #683c27, #4e2b1d);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #c3b192, #a77d52, #8e5b3e, #683c27, #4e2b1d);
}

似たようなカラーパレット

Oak color palette created on .