---
title: "Color atom | GoodBarber's Design System"
description: "This atom is used to describe a color, it shouldn’t be considered as an object but rather as a property.\r\n\r\nTo see how the color is applied and on which components, refer to the [Foundation Color](/uxdesign/color/) section"
canonical_url: "https://www.goodbarber.com/uxdesign/atom-color/"
lang: nl
---

# Color atom | GoodBarber's Design System

[Design System](https://nl.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://nl.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Color atom

Atomic Components

The Color atom defines the appearance of app elements through customizable properties applied to various interface components. Refer to the [Foundation Color](/uxdesign/color/) section for application details.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_color.82b86a43a15b.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_color.82b86a43a15b.mp4)

![](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Color.d582345dfb86.png)

### JSON

Color is not a JSON object, it’s just a property. It can be an hexa string or the string “transparent”.
Here’s a list of example of possible values :

```
"000000"
"bbbbbb"
"00ff00"
"transparent"
```

Color is an important aspect of design because it can greatly impact the overall aesthetic and user experience of a product. Color can be used to create visual interest, convey emotions, and guide the user's attention. It can also be used to create a sense of hierarchy, making certain elements stand out or recede into the background.

In addition to its aesthetic value, color also has a functional role in design. For example, color can be used to indicate important information or actions, such as error messages or call-to-action buttons. Color can also be used to create contrast, making text more legible and easier to read.

In GoodBarber apps, color is often organized into a palette, which is a set of predefined colors that can be used consistently across the entire app. This helps to ensure visual consistency and makes it easier to maintain a cohesive design.