> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/blocks/blocks/color.md).

# Color Blocks

## Overview

Color blocks enable you to specify and manipulate colors used within your app's interface. You can use these blocks to choose and apply colors to elements like backgrounds, text, buttons, or other visual components.

## Color Palette

Clicking a color block opens the standard color palette to select from.&#x20;

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FCig9XuO2rtt2vzM29bBn%2Fcolor-rgb.png?alt=media&amp;token=89629948-0604-4d9c-9e18-7dd0d46803b6" alt="" width="563"></div>

## Random Color

This block returns a random color with an Alpha value of 100%.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F5rfoFx6IpeO6gdasprUL%2Fcolor-ran.png?alt=media&amp;token=832a7d71-abe3-4775-8f46-b18cffa5791e" alt="" width="188"></div>

## Set RGB Color

This block allows you to define a color using [RGB values](https://www.w3schools.com/colors/colors_rgb.asp).

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FWov17UMS9aAlE4wkDgzu%2Fcolor-rgb-mini.png?alt=media&amp;token=901d2d10-8e60-4803-bdbf-e9a60005bbb1" alt=""></div>

## Set HSV Color

This block allows you to define a color using [HSV values](https://en.wikipedia.org/wiki/HSL_and_HSV).

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FS1Gj2EKybJA0FilI5WYm%2Fcolor-hsv.png?alt=media&amp;token=48711788-28de-4b2f-b8b1-07c155dbd39a" alt="" width="563"></div>

## Blend Colors

This block allows you to define a color by blending two colors with a selected ratio of color  1 to color 2.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FgOJ7OuuT0hD0PmbRzOD1%2Fcolor-blend.png?alt=media&amp;token=ceb76c2a-8403-4332-b0c0-92a5e397b6cb" alt=""></div>

## Set RGBA Color

You can use a [text block](/blocks/blocks/text.md) to define a color with [RGBA syntax](https://www.w3schools.com/css/css_colors_rgb.asp) `rgba(r,g,b,a)`.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FCNeDt0tIBrnDOXOz31dH%2Fcolor-rgba.png?alt=media&amp;token=93dba8d6-a784-4154-8b44-ef3ae9cae0b3" alt="" width="563"></div>

## Set Hex Color

You can use a [text block](/blocks/blocks/text.md) to define a color with [hex values](https://htmlcolorcodes.com/).

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MfCEZMxr7q_-k-HWBHc%2F-MfCF2co3XV69NhFIfIS%2FScreen%20Shot%202021-07-22%20at%209.05.35%20AM.png?alt=media&amp;token=c632f0f3-4a30-4b3a-bf0e-a7eece7c3074" alt="" width="563"></div>
