Rainbow Dash カラーパレット

明るさ

彩度

暖かさ

UI Examples

Explore beautiful UI components with Rainbow Dash palette

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

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

Download rainbow dash color palette PNG image (landscape)
Download rainbow dash color palette PNG image (square)

Rainbow Dash カラーパレット CSS

/* CSS */
.color-1 {
color: #00a5e0;
}
.color-2 {
color: #ffd000;
}
.color-3 {
color: #ff5e00;
}
.color-4 {
color: #ff007b;
}
.color-5 {
color: #a400b3;
}

/* CSS Variables */
:root {
--color-1: #00a5e0;
 --color-2: #ffd000;
 --color-3: #ff5e00;
 --color-4: #ff007b;
 --color-5: #a400b3;
 }

Rainbow Dash の背景のグラデーション CSS

/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #00a5e0, #ffd000, #ff5e00, #ff007b, #a400b3);
}
/* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #00a5e0, #ffd000, #ff5e00, #ff007b, #a400b3);
}

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

Rainbow Dash color palette created on .