Color Fields

What is a color field?

A color field stores a hex color value like "#b8f04a" or "rgb(184, 240, 74)". It provides a color picker in the CMS editor for visual selection.

When to use color fields

Color fields are useful for:

• Category colors — assign a unique color to each blog category or tag.
• Brand colors — store a client's brand color in their profile (for agencies managing multiple clients).
• Theme accents — let editors choose an accent color per page or section.
• Product variants — store the actual color of a product color option.
• Team departments — color-code departments in a visual org chart.

Practical applications

Category-colored tags

Each blog category gets a color. The front end uses this color for the category pill/badge. Editors pick the color once in the Category collection; every post in that category inherits it.

Section theming

Some sites allow editors to choose a background or accent color per page section. A color field on a "Sections" or "Pages" collection makes this possible without developer involvement.

Product swatches

E-commerce sites use color fields to display actual product colors as swatches. The color field stores the visual representation; a separate text field stores the color name ("Midnight Blue").

Alternatives to color fields

Not every platform supports native color fields. Alternatives:

Select field with predefined colors

Create a select field with options like "Blue", "Green", "Red". Map each option to a hex value in your front-end code. Simpler but less flexible.

Text field with hex value

A plain text field where editors enter hex codes manually. No color picker, error-prone, but works on any platform.

Tips

1. Provide defaults — do not force editors to pick colors from scratch. Pre-populate with your brand palette options.
2. Ensure contrast — if the color is used as a background, check that text remains readable. Consider enforcing a minimum contrast ratio.
3. Limit usage — color fields are powerful but easy to misuse. Too many editor-controlled colors lead to visual inconsistency.
4. Document the palette — if editors can choose colors, give them a style guide showing which colors to use where.
5. Use select for constrained palettes — if you want editors to choose from 5 brand colors (not any color), a select field is safer than a color picker.

Platform-specific behavior

Webflow

Webflow's Color field stores hex values and provides a native color picker in the Designer editor. You can bind a color field to CSS properties like background-color, color, and border-color directly in the Designer. Key notes:

• Color values are stored as hex strings (e.g., "#FF6B35").
• You can set a default color value per field.
• Webflow does not support opacity/alpha in color fields — use a separate opacity number field if needed.
• Color fields work well with conditional visibility: "If Color is set, show the colored badge."

Airtable

Airtable does not have a native color field type. Common workarounds:

• Single select with colors: Each option in a single select field can be assigned a color. This is the most common approach and works well for category colors.
• Text field with hex values: Store hex codes as plain text. No visual picker, but maximum flexibility.
• Formula field: Generate colors dynamically based on other field values.

Syncing colors between platforms

When syncing from Airtable to Webflow, Trellis maps Airtable single select colors to the closest matching hex value in Webflow. For text-based hex values, the sync is direct. Consider standardizing on hex format ("#FF6B35") across both platforms for the cleanest sync.

Implementation patterns

Dynamic section backgrounds

A popular pattern is letting editors customize page section backgrounds. Create a "Page Sections" collection with a color field for "Background Color" and a select field for "Text Color" (light/dark). In Webflow, bind the color field to the section's background-color and use conditional visibility to toggle between light and dark text classes.

Data visualization

Color fields can drive simple data visualizations. For example, a "Status" collection with a color field lets you create color-coded status indicators. Each status (Active, Paused, Archived) gets a meaningful color that editors can update without developer involvement.

Accessibility considerations

When using color fields for backgrounds or text, always ensure sufficient contrast ratio (WCAG 2.1 requires 4.5:1 for normal text, 3:1 for large text). Consider pairing your color field with a computed "contrast text" field that automatically suggests white or black text based on the background lightness.