Colores

El DS de Buk tiene una paleta de colores fijos para utilizar en el desarrollo de nuestras UI y mantener coherencia dentro de nuestro sistema. Así equilibramos lo que visualizan nuestros clientes usando colores primarios, secundarios, y de acento, que reflejan los valores Buk.

Acá podrás encontrar los colores que usamos, con nombres, sus valores HEX y rgba y escalas de color permitidas en porcentaje de opacidad.

info_outline

¡Puedes copiar el color que necesites haciendo click!

BlueberryPeachKiwiMushroomWatermelon

#2F4DAA

primary / Blueberry

$primary-500

---

Paleta de colores

primary color

100

200

300

400

500

600

700

800

900

secondary color

100

200

300

400

500

600

700

800

900

success color

100

200

300

400

500

600

700

800

900

danger color

100

200

300

400

500

600

700

800

900

basic color

100

200

300

400

500

600

700

800

900

---

Transparencias

Blueberry color

8%

$primary-transparent-100

background: rgba(65, 92, 198, 0.08);

16%

$primary-transparent-200

background: rgba(65, 92, 198, 0.16);

24%

$primary-transparent-300

background: rgba(65, 92, 198, 0.24);

32%

$primary-transparent-400

background: rgba(65, 92, 198, 0.32);

40%

$primary-transparent-500

background: rgba(65, 92, 198, 0.4);

48%

$primary-transparent-600

background: rgba(65, 92, 198, 0.48);

Peach color

8%

$secondary-transparent-100

background: rgba(249, 147, 4, 0.08);

16%

$secondary-transparent-200

background: rgba(249, 147, 4, 0.16);

24%

$secondary-transparent-300

background: rgba(249, 147, 4, 0.24);

32%

$secondary-transparent-400

background: rgba(249, 147, 4, 0.32);

40%

$secondary-transparent-500

background: rgba(249, 147, 4, 0.4);

48%

$secondary-transparent-600

background: rgba(249, 147, 4, 0.48);

Kiwi color

8%

$success-transparent-100

background: rgba(77, 216, 96, 0.08);

16%

$success-transparent-200

background: rgba(77, 216, 96, 0.16);

24%

$success-transparent-300

background: rgba(77, 216, 96, 0.24);

32%

$success-transparent-400

background: rgba(77, 216, 96, 0.32);

40%

$success-transparent-500

background: rgba(77, 216, 96, 0.4);

48%

$success-transparent-600

background: rgba(77, 216, 96, 0.48);

Watermelon color

8%

$danger-transparent-100

background: rgba(233, 104, 92, 0.08);

16%

$danger-transparent-200

background: rgba(233, 104, 92, 0.16);

24%

$danger-transparent-300

background: rgba(233, 104, 92, 0.24);

32%

$danger-transparent-400

background: rgba(233, 104, 92, 0.32);

40%

$danger-transparent-500

background: rgba(233, 104, 92, 0.4);

48%

$danger-transparent-600

background: rgba(233, 104, 92, 0.48);

Mushroom color

8%

$basic-transparent-100

background: rgba(121, 122, 124, 0.08);

16%

$basic-transparent-200

background: rgba(121, 122, 124, 0.16);

24%

$basic-transparent-300

background: rgba(121, 122, 124, 0.24);

32%

$basic-transparent-400

background: rgba(121, 122, 124, 0.32);

40%

$basic-transparent-500

background: rgba(121, 122, 124, 0.4);

48%

$basic-transparent-600

background: rgba(121, 122, 124, 0.48);

---

Colores Starter

primary-starter / Plum

$color-primary-starter

secondary-starter / Pineapple

$color-secondary-starter

---

Paleta de colores Starter

primary-starter color

100

200

300

400

500

600

700

800

900

secondary-starter color

100

200

300

400

500

600

700

800

900

---

Transparencias Starter

Plum color

8%

$primary-starter-transparent-100

background: rgba(6, 63, 99, 0.08);

16%

$primary-starter-transparent-200

background: rgba(6, 63, 99, 0.16);

24%

$primary-starter-transparent-300

background: rgba(6, 63, 99, 0.24);

32%

$primary-starter-transparent-400

background: rgba(6, 63, 99, 0.32);

40%

$primary-starter-transparent-500

background: rgba(6, 63, 99, 0.4);

48%

$primary-starter-transparent-600

background: rgba(6, 63, 99, 0.48);

Pineapple color

8%

$secondary-starter-transparent-100

background: rgba(255, 186, 26, 0.08);

16%

$secondary-starter-transparent-200

background: rgba(255, 186, 26, 0.16);

24%

$secondary-starter-transparent-300

background: rgba(255, 186, 26, 0.24);

32%

$secondary-starter-transparent-400

background: rgba(255, 186, 26, 0.32);

40%

$secondary-starter-transparent-500

background: rgba(255, 186, 26, 0.4);

48%

$secondary-starter-transparent-600

background: rgba(255, 186, 26, 0.48);