Skip to main content
Solved

Accessing Airtable Color Palette

S

Hi there,

I want to keep my block UI consistent with Airtable’s branding where possible. I noticed ColorUtils.getHexForColor here and that seems like a reasonable, but slightly cumbersome solution.

Is this the preferred way to use Airtable’s colors in our blocks, or is there a more direct way to say, set the background color to a standard Airtable color?

Thanks!

P.S it was a bit hard to find that method in the docs as you need to click on the “ColorUtils” tab in the Colors section first. I had expected a more direct way or a pointer on how to get the hex values directly on the colors main page :slightly_smiling_face:

Best answer by Kasra

Hi!

ColorUtils.getHexForColor and ColorUtils.getRgbForColor is the way to to get the hex and rgb values for Airtable’s colors.

If you’re using the built-in components, you can also pass color names to the backgroundColor, textColor, and other color props.

From the style docs:

As another example, style props like backgroundColor and textColor accept color names that ensure visual consistency with the Airtable styleguide. Like the spacing scale, you can always opt out by passing in hex/rgb/hsl strings directly.

<Box backgroundColor="blue" textColor="white" />

That’s helpful feedback – we’ll look into making that easier to discover and use, thanks!

View original
    R
    B
    S
    28 people like this
    • R
      Renee_Meeks
    • B
      bloddy_boggy
    • S
      Sophie_Owen
    • S
      Steven_Lehrburg
    • A
      Achim_Baur
    • M
      Mark_Wallace
    • C
      Christopher_Bis
    • K
      Keith_Taylor
    • J
      Juliet_Thomas
    • F
      Fabrizio_Guarne
    • A
      Andras_Novoszat
    • D
      devon_jenkins
    • K
      Kannan
    • R
      Rob_Arnold
    • P
      Pamela_Okerholm
    • S
      Stephanie_Leish
    • M
      Max_M
    • A
      Alex_Armstrong
    • M
      Marc_Alessandri
    • W
      Wenliang_Lu
    • L
      Lauren_Hebert
    • T
      Trisha_Poole1
    • K
      Koby_Kenney
    • A
      Aaron_Owen
    • J
      Joshua_Soule
    • P
      Polen
    • P
      Paul_K
    • N
      Nathan_Cain
    Did this topic help you find an answer to your question?

    2 replies

    K
    Forum|alt.badge.img+4
    • Kasra
    • Inspiring
    • 192 replies
    • Answer
    • May 24, 2020

    Hi!

    ColorUtils.getHexForColor and ColorUtils.getRgbForColor is the way to to get the hex and rgb values for Airtable’s colors.

    If you’re using the built-in components, you can also pass color names to the backgroundColor, textColor, and other color props.

    From the style docs:

    As another example, style props like backgroundColor and textColor accept color names that ensure visual consistency with the Airtable styleguide. Like the spacing scale, you can always opt out by passing in hex/rgb/hsl strings directly.

    <Box backgroundColor="blue" textColor="white" />

    That’s helpful feedback – we’ll look into making that easier to discover and use, thanks!

    S
    1 person likes this
    • S
      Shaun_Van_Weeld
    S
    Kasra wrote:

    Hi!

    ColorUtils.getHexForColor and ColorUtils.getRgbForColor is the way to to get the hex and rgb values for Airtable’s colors.

    If you’re using the built-in components, you can also pass color names to the backgroundColor, textColor, and other color props.

    From the style docs:

    As another example, style props like backgroundColor and textColor accept color names that ensure visual consistency with the Airtable styleguide. Like the spacing scale, you can always opt out by passing in hex/rgb/hsl strings directly.

    <Box backgroundColor="blue" textColor="white" />

    That’s helpful feedback – we’ll look into making that easier to discover and use, thanks!


    Awesome, this is super helpful! :raised_hands: I didn’t properly appreciate the ability to pass in color names directly to the built-in components!

    H
    1 person likes this
    • H
      Harshit_Juneja

    Reply


    Most helpful members this week

    Terms & Conditions