Skip to main content

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 🙂

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!

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! 🙌 I didn’t properly appreciate the ability to pass in color names directly to the built-in components!

Reply


Terms & Conditions