---
title: Colors
summary: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
bootstrapLink: utilities/colors/
description: Impact of colors on user interface design.
---

## Base colors

Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.

<ColorsTable colors={[ 
  { name: "blue", value: "#066fd1" }, 
  { name: "azure", value: "#4299e1" },
  { name: "indigo", value: "#4263eb" }, 
  { name: "purple", value: "#ae3ec9" },
  { name: "pink", value: "#d6336c" },
  { name: "red", value: "#d63939" },
  { name: "orange", value: "#f76707" },
  { name: "yellow", value: "#f59f00" },
  { name: "lime", value: "#74b816" },
  { name: "green", value: "#2fb344" },
  { name: "teal", value: "#0ca678" },
  { name: "cyan", value: "#17a2b8" },
]}/>

## Light colors

All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.

<ColorsTable colors={[
  { name: "blue-lt", value: "#e9f0f9" },
  { name: "azure-lt", value: "#ecf5fc" },
  { name: "indigo-lt", value: "#eceffd" },
  { name: "purple-lt", value: "#f7ecfa" },
  { name: "pink-lt", value: "#fbebf0" },
  { name: "red-lt", value: "#fbebeb" },
  { name: "orange-lt", value: "#fef0e6" },
  { name: "yellow-lt", value: "#fef5e6" },
  { name: "lime-lt", value: "#f1f8e8" },
  { name: "green-lt", value: "#eaf7ec" },
  { name: "teal-lt", value: "#e7f6f2" },
  { name: "cyan-lt", value: "#e8f6f8" }
]}/>

## Gray palette

The gray palette is a great choice for creating a neutral background for your design. It can be used to create a clean and professional look, and can be combined with other colors to create a harmonious design.

<ColorsTable colors={[
  { name: "gray-50", value: "#f8fafc" },
  { name: "gray-100", value: "#f1f5f9" },
  { name: "gray-200", value: "#e2e8f0" },
  { name: "gray-300", value: "#c8d3e1" },
  { name: "gray-400", value: "#9ba9be" },
  { name: "gray-500", value: "#6c7a91" },
  { name: "gray-600", value: "#49566c" },
  { name: "gray-700", value: "#313c52" },
  { name: "gray-800", value: "#1d273b" },
  { name: "gray-900", value: "#0f172a" }
]} />

## Social colors

Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product.

<ColorsTable colors={[
  { name: "facebook", value: "#1877F2" },
  { name: "twitter", value: "#1da1f2" },
  { name: "linkedin", value: "#0a66c2" },
  { name: "google", value: "#dc4e41" },
  { name: "youtube", value: "#ff0000" },
  { name: "vimeo", value: "#1ab7ea" },
  { name: "dribbble", value: "#ea4c89" },
  { name: "github", value: "#181717" },
  { name: "instagram", value: "#e4405f" },
  { name: "pinterest", value: "#bd081c" },
  { name: "vk", value: "#6383a8" },
  { name: "rss", value: "#ffa500" },
  { name: "flickr", value: "#0063dc" },
  { name: "bitbucket", value: "#0052cc" },
  { name: "tabler", value: "#066fd1" }
]} />