Sandy Beach カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Sandy Beach palette

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

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

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

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

Download sandy beach color palette PNG image (landscape)
Download sandy beach color palette PNG image (square)

Sandy Beach カラーパレット CSS

/* CSS */
.color-1 {
color: #f4a662;
}
.color-2 {
color: #e4b35e;
}
.color-3 {
color: #d1be7b;
}
.color-4 {
color: #b3d99b;
}
.color-5 {
color: #77c5a7;
}

/* CSS Variables */
:root {
--color-1: #f4a662;
 --color-2: #e4b35e;
 --color-3: #d1be7b;
 --color-4: #b3d99b;
 --color-5: #77c5a7;
 }

Sandy Beach の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #f4a662, #e4b35e, #d1be7b, #b3d99b, #77c5a7);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #f4a662, #e4b35e, #d1be7b, #b3d99b, #77c5a7);
}

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

Sandy Beach color palette created on .