Community Vibrance カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Community Vibrance palette

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

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

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

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

Download community vibrance color palette PNG image (landscape)
Download community vibrance color palette PNG image (square)

Community Vibrance カラーパレット CSS

/* CSS */
.color-1 {
color: #ff6e61;
}
.color-2 {
color: #ff914d;
}
.color-3 {
color: #ffd65c;
}
.color-4 {
color: #aad96d;
}
.color-5 {
color: #4cc0c8;
}

/* CSS Variables */
:root {
--color-1: #ff6e61;
 --color-2: #ff914d;
 --color-3: #ffd65c;
 --color-4: #aad96d;
 --color-5: #4cc0c8;
 }

Community Vibrance の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6e61, #ff914d, #ffd65c, #aad96d, #4cc0c8);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6e61, #ff914d, #ffd65c, #aad96d, #4cc0c8);
}

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

Community Vibrance color palette created on .