Barvy

Barvy v design systému zajišťují konzistentní použití a interpretaci designových prvků napříč aplikacemi.

Core

Basic

Vzorek barvy	Název barvy	Hodnota barvy
	colorBasicBlack	hsl(0, 0%, 0%)
	colorBasicWhite	hsl(0, 0%, 100%)

Neuron
Koop
CPP
KNZ
SUS+

Vzorek barvy	Název barvy	Hodnota barvy
	colorPrimary100	hsl(180, 30%, 96%)
	colorPrimary200	hsl(180, 36%, 89%)
	colorPrimary300	hsl(184, 32%, 73%)
	colorPrimary400	hsl(172, 46%, 72%)
	colorPrimary500	hsl(173, 64%, 50%)
	colorPrimary600	hsl(182, 42%, 47%)
	colorPrimary700	hsl(189, 14%, 52%)
	colorPrimary800	hsl(188, 44%, 35%)
	colorPrimary900	hsl(182, 100%, 19%)
	colorPrimary000	hsl(176, 100%, 9%)

Secondary

Vzorek barvy	Název barvy	Hodnota barvy
	colorSecondary100	hsl(210, 20%, 98%)
	colorSecondary150	hsl(200, 20%, 97%)
	colorSecondary200	hsl(210, 17%, 93%)
	colorSecondary300	hsl(210, 14%, 89%)
	colorSecondary400	hsl(210, 14%, 83%)
	colorSecondary500	hsl(210, 11%, 71%)
	colorSecondary600	hsl(208, 7%, 46%)
	colorSecondary700	hsl(210, 9%, 31%)
	colorSecondary800	hsl(210, 10%, 23%)
	colorSecondary900	hsl(210, 11%, 15%)
	colorSecondary000	hsl(210, 10%, 8%)

Red

Vzorek barvy	Název barvy	Hodnota barvy
	colorRed100	hsl(4, 70%, 96%)
	colorRed200	hsl(8, 74%, 88%)
	colorRed300	hsl(8, 100%, 85%)
	colorRed500	hsl(8, 77%, 67%)
	colorRed600	hsl(8, 73%, 55%)
	colorRed700	hsl(0, 54%, 49%)
	colorRed800	hsl(0, 54%, 40%)

Blue

Vzorek barvy	Název barvy	Hodnota barvy
	colorBlue100	hsl(206, 80%, 96%)
	colorBlue200	hsl(206, 84%, 88%)
	colorBlue300	hsl(206, 100%, 80%)
	colorBlue500	hsl(206, 83%, 72%)
	colorBlue600	hsl(206, 83%, 65%)
	colorBlue700	hsl(206, 72%, 53%)
	colorBlue800	hsl(206, 72%, 40%)

Green

Vzorek barvy	Název barvy	Hodnota barvy
	colorGreen100	hsl(101, 80%, 96%)
	colorGreen200	hsl(101, 65%, 80%)
	colorGreen300	hsl(101, 67%, 75%)
	colorGreen500	hsl(100, 58%, 67%)
	colorGreen600	hsl(100, 77%, 44%)
	colorGreen700	hsl(100, 71%, 39%)
	colorGreen800	hsl(100, 71%, 32%)

Orange

Vzorek barvy	Název barvy	Hodnota barvy
	colorOrange100	hsl(33, 90%, 96%)
	colorOrange200	hsl(34, 93%, 84%)
	colorOrange300	hsl(36, 100%, 73%)
	colorOrange500	hsl(34, 89%, 68%)
	colorOrange600	hsl(34, 93%, 54%)
	colorOrange700	hsl(34, 95%, 45%)
	colorOrange800	hsl(34, 93%, 40%)

Product Colors

Life

Vzorek barvy	Název barvy	Hodnota barvy
	colorProductsLife200	hsl(137, 50%, 93%)
	colorProductsLife300	hsl(137, 56%, 86%)
	colorProductsLife600	hsl(132, 46%, 67%)

Vehicles

Vzorek barvy	Název barvy	Hodnota barvy
	colorProductsVehicles200	hsl(27, 90%, 92%)
	colorProductsVehicles300	hsl(26, 92%, 86%)
	colorProductsVehicles600	hsl(29, 92%, 57%)

Property

Vzorek barvy	Název barvy	Hodnota barvy
	colorProductsProperty200	hsl(191, 66%, 92%)
	colorProductsProperty300	hsl(191, 74%, 87%)
	colorProductsProperty600	hsl(192, 70%, 59%)

Travel

Vzorek barvy	Název barvy	Hodnota barvy
	colorProductsTravel200	hsl(45, 100%, 92%)
	colorProductsTravel300	hsl(44, 100%, 84%)
	colorProductsTravel600	hsl(48, 100%, 50%)

Business

Vzorek barvy	Název barvy	Hodnota barvy
	colorProductsBusiness200	hsl(0, 0%, 92%)
	colorProductsBusiness300	hsl(0, 0%, 86%)
	colorProductsBusiness600	hsl(0, 0%, 60%)

Additional Colors

Apple Green

Vzorek barvy	Název barvy	Hodnota barvy
	colorApplegreen200	hsl(85, 56%, 77%)
	colorApplegreen600	hsl(85, 56%, 44%)
	colorApplegreen900	hsl(85, 67%, 18%)

Emerald Green

Vzorek barvy	Název barvy	Hodnota barvy
	colorEmeraldgreen200	hsl(153, 76%, 81%)
	colorEmeraldgreen600	hsl(153, 76%, 44%)
	colorEmeraldgreen900	hsl(153, 71%, 19%)

Celestial Blue

Vzorek barvy	Název barvy	Hodnota barvy
	colorCelestialblue200	hsl(201, 65%, 80%)
	colorCelestialblue600	hsl(201, 65%, 44%)
	colorCelestialblue900	hsl(201, 72%, 21%)

Majorelle Blue

Vzorek barvy	Název barvy	Hodnota barvy
	colorMajorelleblue200	hsl(243, 67%, 88%)
	colorMajorelleblue600	hsl(251, 77%, 62%)
	colorMajorelleblue900	hsl(251, 50%, 36%)

Electric Purple

Vzorek barvy	Název barvy	Hodnota barvy
	colorElectricpurple200	hsl(262, 100%, 87%)
	colorElectricpurple600	hsl(279, 100%, 60%)
	colorElectricpurple900	hsl(279, 59%, 30%)

Indian Red

Vzorek barvy	Název barvy	Hodnota barvy
	colorIndianred200	hsl(343, 64%, 85%)
	colorIndianred600	hsl(335, 41%, 54%)
	colorIndianred900	hsl(335, 48%, 27%)

Sandy Brown

Vzorek barvy	Název barvy	Hodnota barvy
	colorSandybrown200	hsl(26, 75%, 83%)
	colorSandybrown600	hsl(28, 88%, 65%)
	colorSandybrown900	hsl(28, 65%, 23%)

Citrine

Vzorek barvy	Název barvy	Hodnota barvy
	colorCitrine200	hsl(51, 100%, 88%)
	colorCitrine600	hsl(52, 100%, 44%)
	colorCitrine900	hsl(52, 82%, 20%)

Semantic Colors

Brand

Vzorek barvy	Název barvy	Hodnota barvy
	colorBrandFade	hsl(180, 30%, 96%)
	colorBrandSubtle	hsl(180, 36%, 89%)
	colorBrandMute	hsl(184, 32%, 73%)
	colorBrandMedium	hsl(173, 64%, 50%)
	colorBrandIntense	hsl(182, 42%, 47%)
	colorBrandEmphasize	hsl(188, 44%, 35%)

Neutral

Vzorek barvy	Název barvy	Hodnota barvy
	colorNeutralWhite	hsl(0, 0%, 100%)
	colorNeutralFade	hsl(210, 20%, 98%)
	colorNeutralSubtle	hsl(210, 17%, 93%)
	colorNeutralMute	hsl(210, 14%, 89%)
	colorNeutralMedium	hsl(210, 11%, 71%)
	colorNeutralIntense	hsl(208, 7%, 46%)
	colorNeutralEmphasize	hsl(210, 10%, 23%)
	colorNeutralBlack	hsl(0, 0%, 0%)

Elevation

Vzorek barvy	Název barvy	Hodnota barvy
	colorElevation0	hsla(210, 11%, 15%, 0)
	colorElevation10	hsla(210, 11%, 15%, 0.1)
	colorElevation15	hsla(210, 11%, 15%, 0.1)
	colorElevation20	hsla(210, 11%, 15%, 0.2)
	colorElevation40	hsla(210, 11%, 15%, 0.4)
	colorElevation60	hsla(210, 11%, 15%, 0.6)

Danger

Vzorek barvy	Název barvy	Hodnota barvy
	colorDangerFade	hsl(4, 70%, 96%)
	colorDangerSubtle	hsl(8, 74%, 88%)
	colorDangerMute	hsl(8, 100%, 85%)
	colorDangerMedium	hsl(8, 77%, 67%)
	colorDangerIntense	hsl(8, 73%, 55%)
	colorDangerEmphasize	hsl(0, 54%, 40%)

Info

Vzorek barvy	Název barvy	Hodnota barvy
	colorInfoFade	hsl(206, 80%, 96%)
	colorInfoSubtle	hsl(206, 84%, 88%)
	colorInfoMute	hsl(206, 100%, 80%)
	colorInfoMedium	hsl(206, 83%, 72%)
	colorInfoIntense	hsl(206, 83%, 65%)
	colorInfoEmphasize	hsl(206, 72%, 40%)

Success

Vzorek barvy	Název barvy	Hodnota barvy
	colorSuccessFade	hsl(101, 80%, 96%)
	colorSuccessSubtle	hsl(101, 65%, 80%)
	colorSuccessMute	hsl(101, 67%, 75%)
	colorSuccessMedium	hsl(100, 58%, 67%)
	colorSuccessIntense	hsl(100, 77%, 44%)
	colorSuccessEmphasize	hsl(100, 71%, 32%)

Warning

Vzorek barvy	Název barvy	Hodnota barvy
	colorWarningFade	hsl(33, 90%, 96%)
	colorWarningSubtle	hsl(34, 93%, 84%)
	colorWarningMute	hsl(36, 100%, 73%)
	colorWarningMedium	hsl(34, 89%, 68%)
	colorWarningIntense	hsl(34, 93%, 54%)
	colorWarningEmphasize	hsl(34, 93%, 40%)

Colors | VIGo Design System