Back to Color-guidelines
CSS ComponentThe latest version of this package is: 0.1.1, Opens in new window
The Relax color palette is created with effiency in mind, and with inheritance with the core If Visual Identity
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-relax-core/color@0.1.1
Table of Contents
Tokens
Color tokens
Base Color tokens
Name | Value | Is aliased in |
---|---|---|
rlx-color-base-grey-100 rgb(255, 255, 255) | rgb(255, 255, 255) | |
rlx-color-base-grey-200 rgb(244, 244, 244) | rgb(244, 244, 244) | |
rlx-color-base-grey-300 rgb(217, 217, 217) | rgb(217, 217, 217) | |
rlx-color-base-grey-400 rgb(190, 190, 190) | rgb(190, 190, 190) | |
rlx-color-base-grey-500 rgb(92, 92, 92) | rgb(92, 92, 92) | |
rlx-color-base-grey-600 rgb(51, 51, 51) | rgb(51, 51, 51) | |
rlx-color-base-brown-100 rgb(235, 227, 220) | rgb(235, 227, 220) | |
rlx-color-base-brown-200 rgb(221, 208, 197) | rgb(221, 208, 197) | |
rlx-color-base-brown-300 rgb(213, 196, 183) | rgb(213, 196, 183) | |
rlx-color-base-brown-400 rgb(176, 162, 152) | rgb(176, 162, 152) | |
rlx-color-base-brown-500 rgb(143, 131, 119) | rgb(143, 131, 119) | |
rlx-color-base-brown-600 rgb(110, 100, 90) | rgb(110, 100, 90) | |
rlx-color-base-brown-700 rgb(51, 42, 38) | rgb(51, 42, 38) | |
rlx-color-base-red-100 rgb(240, 96, 100) | rgb(240, 96, 100) | |
rlx-color-base-red-200 rgb(202, 60, 62) | rgb(202, 60, 62) | |
rlx-color-base-pink-100 rgb(248, 198, 201) | rgb(248, 198, 201) | |
rlx-color-base-pink-200 rgb(241, 108, 143) | rgb(241, 108, 143) | |
rlx-color-base-yellow-100 rgb(255, 240, 158) | rgb(255, 240, 158) | |
rlx-color-base-yellow-200 rgb(242, 184, 122) | rgb(242, 184, 122) | |
rlx-color-base-turqois-100 rgb(208, 230, 195) | rgb(208, 230, 195) | |
rlx-color-base-turqois-200 rgb(118, 187, 178) | rgb(118, 187, 178) | |
rlx-color-base-green-100 rgb(145, 209, 105) | rgb(145, 209, 105) | |
rlx-color-base-green-200 rgb(105, 156, 85) | rgb(105, 156, 85) | |
rlx-color-base-blue-100 rgb(186, 221, 231) | rgb(186, 221, 231) | |
rlx-color-base-blue-200 rgb(167, 192, 242) | rgb(167, 192, 242) | |
rlx-color-base-blue-300 rgb(104, 170, 200) | rgb(104, 170, 200) | |
rlx-color-base-purple-100 rgb(199, 144, 193) | rgb(199, 144, 193) | |
rlx-color-base-purple-200 rgb(140, 57, 128) | rgb(140, 57, 128) | |
rlx-color-base-slate-100 rgb(88, 94, 106) | rgb(88, 94, 106) | |
rlx-color-base-slate-200 rgb(51, 58, 72) | rgb(51, 58, 72) | |
rlx-color-base-slate-300 rgb(37, 45, 60) | rgb(37, 45, 60) | |
rlx-color-base-slate-400 rgb(25, 33, 48) | rgb(25, 33, 48) | |
rlx-color-base-slate-500 rgb(20, 28, 44) | rgb(20, 28, 44) | |
rlx-color-base-beige-100 rgb(250, 249, 247) | rgb(250, 249, 247) | |
rlx-color-base-beige-200 rgb(246, 243, 240) | rgb(246, 243, 240) | |
rlx-color-base-beige-300 rgb(241, 236, 232) | rgb(241, 236, 232) | |
rlx-color-base-beige-400 rgb(237, 230, 225) | rgb(237, 230, 225) | |
rlx-color-base-beige-500 rgb(232, 224, 217) | rgb(232, 224, 217) |
Background Color tokens
Name | Value | Is aliased in |
---|---|---|
rlx-color-background-100-light | rgb(250, 249, 247) | |
rlx-color-background-100-dark | rgb(20, 28, 44) | |
rlx-color-background-200-light | rgb(246, 243, 240) | |
rlx-color-background-200-dark | rgb(25, 33, 48) | |
rlx-color-background-300-light | rgb(241, 236, 232) | |
rlx-color-background-300-dark | rgb(37, 45, 60) | |
rlx-color-background-400-light | rgb(237, 230, 225) | |
rlx-color-background-400-dark | rgb(51, 58, 72) | |
rlx-color-background-500-light | rgb(232, 224, 217) | |
rlx-color-background-500-dark | rgb(88, 94, 106) |
Infographic Color tokens
Name | Value | Is aliased in |
---|---|---|
rlx-color-infographic-100 | rgb(240, 96, 100) | |
rlx-color-infographic-200 | rgb(202, 60, 62) | |
rlx-color-infographic-300 | rgb(145, 209, 105) | |
rlx-color-infographic-400 | rgb(105, 156, 85) | |
rlx-color-infographic-500 | rgb(186, 221, 231) | |
rlx-color-infographic-600 | rgb(104, 170, 200) | |
rlx-color-infographic-700 | rgb(208, 230, 195) | |
rlx-color-infographic-800 | rgb(118, 187, 178) | |
rlx-color-infographic-900 | rgb(248, 198, 201) | |
rlx-color-infographic-1000 | rgb(241, 108, 143) | |
rlx-color-infographic-1100 | rgb(199, 144, 193) | |
rlx-color-infographic-1200 | rgb(140, 57, 128) | |
rlx-color-infographic-1300 | rgb(255, 240, 158) | |
rlx-color-infographic-1400 | rgb(242, 184, 122) |
States Color tokens
Name | Value | Is aliased in |
---|---|---|
rlx-color-states-disabled | rgba(110,98,94,0.3) | |
rlx-color-states-active | rgb(0, 64, 128) | |
rlx-color-states-hover | rgb(0, 64, 128) | |
rlx-color-states-focus | rgb(0, 84, 240) |
Text Color tokens
Name | Value | Is aliased in |
---|---|---|
rlx-color-text-subtle | rgb(110, 98, 94) | |
rlx-color-text-primary-on-light | rgb(51, 30, 17) | |
rlx-color-text-primary-on-dark | rgb(250, 249, 247) | |
rlx-color-text-primary-normal | rgb(51, 30, 17) | |
rlx-color-text-primary-inverse | rgb(250, 249, 247) |