Extensions

Press shift + S to search API reference.

Object Literal

Airtable color names.

To get the corresponding RGB or HEX values, use getRgbForColor or getHexForColor.

You can also pass these values into the color props for components:

import {Box, colors} from '@airtable/blocks/ui';
<Box backgroundColor={colors.BLUE} />

Properties

BLUE"blue"
BLUE_BRIGHT"blueBright"
BLUE_DARK_1"blueDark1"
BLUE_LIGHT_1"blueLight1"
BLUE_LIGHT_2"blueLight2"
CYAN"cyan"
CYAN_BRIGHT"cyanBright"
CYAN_DARK_1"cyanDark1"
CYAN_LIGHT_1"cyanLight1"
CYAN_LIGHT_2"cyanLight2"
GRAY"gray"
GRAY_BRIGHT"grayBright"
GRAY_DARK_1"grayDark1"
GRAY_LIGHT_1"grayLight1"
GRAY_LIGHT_2"grayLight2"
GREEN"green"
GREEN_BRIGHT"greenBright"
GREEN_DARK_1"greenDark1"
GREEN_LIGHT_1"greenLight1"
GREEN_LIGHT_2"greenLight2"
ORANGE"orange"
ORANGE_BRIGHT"orangeBright"
ORANGE_DARK_1"orangeDark1"
ORANGE_LIGHT_1"orangeLight1"
ORANGE_LIGHT_2"orangeLight2"
PINK"pink"
PINK_BRIGHT"pinkBright"
PINK_DARK_1"pinkDark1"
PINK_LIGHT_1"pinkLight1"
PINK_LIGHT_2"pinkLight2"
PURPLE"purple"
PURPLE_BRIGHT"purpleBright"
PURPLE_DARK_1"purpleDark1"
PURPLE_LIGHT_1"purpleLight1"
PURPLE_LIGHT_2"purpleLight2"
RED"red"
RED_BRIGHT"redBright"
RED_DARK_1"redDark1"
RED_LIGHT_1"redLight1"
RED_LIGHT_2"redLight2"
TEAL"teal"
TEAL_BRIGHT"tealBright"
TEAL_DARK_1"tealDark1"
TEAL_LIGHT_1"tealLight1"
TEAL_LIGHT_2"tealLight2"
YELLOW"yellow"
YELLOW_BRIGHT"yellowBright"
YELLOW_DARK_1"yellowDark1"
YELLOW_LIGHT_1"yellowLight1"
YELLOW_LIGHT_2"yellowLight2"