Color field
Purpose
A color: a brand color, a section background, the color of a button. Editors pick it with the color picker, type a hex code, or click one of the field's palette colors.
Field type name
color
Settings
| Setting | Description |
|---|---|
| Instructions | Shown to editors below the field label. (max 2000 characters) |
| Default Value | Returned when nothing has been saved yet. A hex color, or empty. |
| Palette | Colors editors can pick with one click, e.g. your brand colors. (max 100) |
| Palette Only | Editors can only choose a color from the palette (the picker and typing are off). Needs at least one palette color; the default value must be one of them. |
| Transparency | Adds an opacity slider; values become #rrggbbaa. Without it, colors with transparency are rejected (also in the default and the palette). |
| Return Format | What cafe_get_field() returns: hex, rgb or array. |
| Translation | How the field behaves in other languages: translate, copy, copy_once or do_not_translate. Used on top-level fields when WPML is active. See WPML. |
| Width | Width on edit screens, to place fields side by side: 100 (full), 75, 66, 50, 33 or 25 (%). Phones always show full width. |
| Label per language | The label and instructions per language code while editing in that language, e.g. {"nl": {"label": "Merkkleur"}}. Set on the Translation tab when WPML is active. See WPML. |
PHP return value
By Return Format, or null when empty:
| Return format | Example |
|---|---|
hex (default) |
"#4f46e5", "#00000080" |
rgb |
"rgb(79, 70, 229)", "rgba(0, 0, 0, 0.5)" |
array |
['hex' => '#00000080', 'red' => 0, 'green' => 0, 'blue' => 0, 'alpha' => 0.5] |
Example
$brand = cafe_get_field( 'brand_color' );
if ( $brand ) {
printf( '<section style="background-color:%s">', esc_attr( $brand ) );
}
// Return format "array": pick a readable text color for the background.
$color = cafe_get_field( 'hero_background' );
if ( $color ) {
$light = ( $color['red'] * 299 + $color['green'] * 587 + $color['blue'] * 114 ) / 1000 > 150;
printf( '<div style="background:%s;color:%s">', esc_attr( $color['hex'] ), $light ? '#000' : '#fff' );
}