---json
{
    "description": "Color management in ComboStrap",
    "page_id": "3nkx84kkwic12xxffjl5h",
    "title": "Color - How to specify a Color Value on ComboStrap Component"
}
---
====== ComboStrap Styling - Color ======





===== About =====
Every [[docs:component|ComboStrap UI component]] can be colorized with one of the following <icon name="bi:palette-fill" width="16"/> color attributes
  * [[text-color|text-color]] : The color of the text
  * [[background#color|background-color]] : The color of the [[background|background]]
  * [[border#color|border-color]] : The color of the [[border|border]]

This page describes which [[#value|color value]], they can take.







===== Example =====
  * A [[docs:block:card|card]] with:
      * a ''black'' [[text-color|(text) color]]
      * a ''teal'' [[docs:styling:background#color|background color]]
      * a ''blue'' [[docs:styling:border#color|border color]]

<webcode name="Default">

<code dw>
<card color="black" background-color="teal" border-color="blue" align="center" width="200px">
A teal [[docs:block:card|card]] with a black text and a blue border
</card>
</code>
  * Output:
</webcode>

===== Value =====

''ComboStrap'' supports the following color value:
  * [[#name]]
  * [[#rgb|RGB]]
  * [[#reset]] (to take the color of the parent)

<note tip>
== Color Generator ==
Generating or choosing attractive color is not easy. The [[color_generator|color generator page]] may help you in this task.
</note>
==== Name ====
[[:start|ComboStrap]] follows the [[https://getbootstrap.com/docs/4.0/utilities/colors/|Bootstrap color naming]] and you may then use the following color names.

<note>
You can set the [[:docs:theme:branding-colors|branding colors]] ''primary'' and ''secondary'' in the configuration.
</note>

The default Bootstrap colors are:

{{docs:block:bootstrap_default_color.png|}}


<note>
You can also use a [[https://drafts.csswg.org/css-color/#color-keywords|CSS Color name]].
</note>

==== Rgb ====

''rbg'' (or red blue green) is the standard web value that is composed of an hexadecimal value.

Example  with the [[docs:block:text|text component]]
<webcode frameborder="0">
<code dw>
<text color="#6c757d" width="fit" align="center">
Text color with a hexadecimal value of ''#6c757d''
</text>
</code>
  * Output
</webcode>

==== Reset ====
The ''reset'' color applied on a [[docs:content:link|link]] will take the color of the [[docs:block:text|text]] and we [[docs:styling:underline|underline it]] to make it visible.
<webcode name="Default" frameborder="0">
  * Input

<code dw>
<text color="#6c757d">
Colored text with a [[?color=reset&underline|reset link]]
</text>
</code>
  * Output
</webcode>