turretcss

Color


All

White
Light
Grey
Dark
Primary
Secondary
Tertiary
Error
Warning
Success
Info

Base

White
Black
--white: hsl(220, 10%, 100%);
--white-hover: color-mod(var(--white) shade(5%));
--white-active: color-mod(var(--white) shade(10%));

--black: hsl(220, 10%, 0%);
--black-hover: color-mod(var(--black) tint(20%));
--black-active: color-mod(var(--black) tint(10%));

Shades

Light

Light
Light
50
Light
100
Light
200
Light
300
Light
400
Light
500
Light
600
Light
700
Light
800
Light
900
--light: hsl(220, 10%, 85%);
--light-hover: var(--light-400);
--light-active: var(--light-600);
--light-50: color-mod(var(--light-100) tint(50%) saturation(+1.25%));
--light-100: color-mod(var(--light-200) tint(40%) saturation(+1.25%));
--light-200: color-mod(var(--light-300) tint(30%) saturation(+1.25%));
--light-300: color-mod(var(--light-400) tint(20%) saturation(+1.25%));
--light-400: color-mod(var(--light) tint(10%) saturation(+1.25%));
--light-500: var(--light);
--light-600: color-mod(var(--light) shade(5%) saturation(+5%));
--light-700: color-mod(var(--light-600) shade(10%) saturation(+5%));
--light-800: color-mod(var(--light-700) shade(15%) saturation(+5%));
--light-900: color-mod(var(--light-800) shade(20%) saturation(+5%));

Grey

Grey
Grey
50
Grey
100
Grey
200
Grey
300
Grey
400
Grey
500
Grey
600
Grey
700
Grey
800
Grey
900
--grey: hsl(220, 10%, 40%);
--grey-hover: var(--grey-400);
--grey-active: var(--grey-600);
--grey-50: color-mod(var(--grey-100) tint(30%) saturation(+2.5%));
--grey-100: color-mod(var(--grey-200) tint(25%) saturation(+2.5%));
--grey-200: color-mod(var(--grey-300) tint(20%) saturation(+2.5%));
--grey-300: color-mod(var(--grey-400) tint(15%) saturation(+2.5%));
--grey-400: color-mod(var(--grey) tint(10%) saturation(+2.5%));
--grey-500: var(--grey);
--grey-600: color-mod(var(--grey) shade(5%) saturation(+2.5%));
--grey-700: color-mod(var(--grey-600) shade(10%) saturation(+2.5%));
--grey-800: color-mod(var(--grey-700) shade(15%) saturation(+2.5%));
--grey-900: color-mod(var(--grey-800) shade(20%) saturation(+2.5%));

Dark

Dark
Dark
50
Dark
100
Dark
200
Dark
300
Dark
400
Dark
500
Dark
600
Dark
700
Dark
800
Dark
900
--dark: hsl(220, 10%, 20%);
--dark-hover: var(--dark-400);
--dark-active: var(--dark-600);
--dark-50: color-mod(var(--dark-100) tint(30%) saturation(+2.5%));
--dark-100: color-mod(var(--dark-200) tint(25%) saturation(+2.5%));
--dark-200: color-mod(var(--dark-300) tint(20%) saturation(+2.5%));
--dark-300: color-mod(var(--dark-400) tint(15%) saturation(+2.5%));
--dark-400: color-mod(var(--dark) tint(10%) saturation(+2.5%));
--dark-500: var(--dark);
--dark-600: color-mod(var(--dark) shade(5%) saturation(+2.5%));
--dark-700: color-mod(var(--dark-600) shade(10%) saturation(+2.5%));
--dark-800: color-mod(var(--dark-700) shade(15%) saturation(+2.5%));
--dark-900: color-mod(var(--dark-800) shade(20%) saturation(+2.5%));

Palettes

Primary

Primary
Primary
50
Primary
100
Primary
200
Primary
300
Primary
400
Primary
500
Primary
600
Primary
700
Primary
800
Primary
900
--primary: hsl(220, 80%, 50%);
--primary-hover: var(--primary-400);
--primary-active: var(--primary-600);
--primary-50: color-mod(var(--primary-100) tint(60%) saturation(+2.5%));
--primary-100: color-mod(var(--primary-200) tint(40%) saturation(+2.5%));
--primary-200: color-mod(var(--primary-300) tint(30%) saturation(+2.5%));
--primary-300: color-mod(var(--primary-400) tint(20%) saturation(+2.5%));
--primary-400: color-mod(var(--primary) tint(10%) saturation(+2.5%));
--primary-500: var(--primary);
--primary-600: color-mod(var(--primary) shade(15%) saturation(+2.5%));
--primary-700: color-mod(var(--primary-600) shade(20%) saturation(+2.5%));
--primary-800: color-mod(var(--primary-700) shade(25%) saturation(+2.5%));
--primary-900: color-mod(var(--primary-800) shade(30%) saturation(+2.5%));

Secondary

Secondary
Secondary
50
Secondary
100
Secondary
200
Secondary
300
Secondary
400
Secondary
500
Secondary
600
Secondary
700
Secondary
800
Secondary
900
--secondary: hsl(270, 80%, 50%);
--secondary-hover: var(--secondary-400);
--secondary-active: var(--secondary-600);
--secondary-50: color-mod(var(--secondary-100) tint(60%) saturation(+2.5%));
--secondary-100: color-mod(var(--secondary-200) tint(50%) saturation(+2.5%));
--secondary-200: color-mod(var(--secondary-300) tint(30%) saturation(+2.5%));
--secondary-300: color-mod(var(--secondary-400) tint(20%) saturation(+2.5%));
--secondary-400: color-mod(var(--secondary) tint(10%) saturation(+2.5%));
--secondary-500: var(--secondary);
--secondary-600: color-mod(var(--secondary) shade(15%) saturation(+2.5%));
--secondary-700: color-mod(var(--secondary-600) shade(20%) saturation(+2.5%));
--secondary-800: color-mod(var(--secondary-700) shade(25%) saturation(+2.5%));
--secondary-900: color-mod(var(--secondary-800) shade(30%) saturation(+2.5%));

Tertiary

Tertiary
Tertiary
50
Tertiary
100
Tertiary
200
Tertiary
300
Tertiary
400
Tertiary
500
Tertiary
600
Tertiary
700
Tertiary
800
Tertiary
900
--tertiary: hsl(320, 80%, 50%);
--tertiary-hover: var(--tertiary-400);
--tertiary-active: var(--tertiary-600);
--tertiary-50: color-mod(var(--tertiary-100) tint(60%) saturation(+2.5%));
--tertiary-100: color-mod(var(--tertiary-200) tint(50%) saturation(+2.5%));
--tertiary-200: color-mod(var(--tertiary-300) tint(30%) saturation(+2.5%));
--tertiary-300: color-mod(var(--tertiary-400) tint(20%) saturation(+2.5%));
--tertiary-400: color-mod(var(--tertiary) tint(10%) saturation(+2.5%));
--tertiary-500: var(--tertiary);
--tertiary-600: color-mod(var(--tertiary) shade(15%) saturation(+2.5%));
--tertiary-700: color-mod(var(--tertiary-600) shade(20%) saturation(+2.5%));
--tertiary-800: color-mod(var(--tertiary-700) shade(25%) saturation(+2.5%));
--tertiary-900: color-mod(var(--tertiary-800) shade(30%) saturation(+2.5%));

Indicators

Error

Error
Error
50
Error
100
Error
200
Error
300
Error
400
Error
500
Error
600
Error
700
Error
800
Error
900
--error: hsl(0, 100%, 40%);
--error-hover: var(--error-400);
--error-active: var(--error-600);
--error-50: color-mod(var(--error-100) tint(60%) saturation(+2.5%));
--error-100: color-mod(var(--error-200) tint(50%) saturation(+2.5%));
--error-200: color-mod(var(--error-300) tint(30%) saturation(+2.5%));
--error-300: color-mod(var(--error-400) tint(20%) saturation(+2.5%));
--error-400: color-mod(var(--error) tint(10%) saturation(+2.5%));
--error-500: var(--error);
--error-600: color-mod(var(--error) shade(15%) saturation(+2.5%));
--error-700: color-mod(var(--error-600) shade(20%) saturation(+2.5%));
--error-800: color-mod(var(--error-700) shade(25%) saturation(+2.5%));
--error-900: color-mod(var(--error-800) shade(30%) saturation(+2.5%));

Warning

Warning
Warning
50
Warning
100
Warning
200
Warning
300
Warning
400
Warning
500
Warning
600
Warning
700
Warning
800
Warning
900
--warning: hsl(20, 100%, 50%);
--warning-hover: var(--warning-400);
--warning-active: var(--warning-600);
--warning-50: color-mod(var(--warning-100) tint(60%) saturation(+2.5%));
--warning-100: color-mod(var(--warning-200) tint(50%) saturation(+2.5%));
--warning-200: color-mod(var(--warning-300) tint(30%) saturation(+2.5%));
--warning-300: color-mod(var(--warning-400) tint(20%) saturation(+2.5%));
--warning-400: color-mod(var(--warning) tint(10%) saturation(+2.5%));
--warning-500: var(--warning);
--warning-600: color-mod(var(--warning) shade(15%) saturation(+2.5%));
--warning-700: color-mod(var(--warning-600) shade(20%) saturation(+2.5%));
--warning-800: color-mod(var(--warning-700) shade(25%) saturation(+2.5%));
--warning-900: color-mod(var(--warning-800) shade(30%) saturation(+2.5%));

Success

Success
Success
50
Success
100
Success
200
Success
300
Success
400
Success
500
Success
600
Success
700
Success
800
Success
900
--success: hsl(120, 100%, 35%);
--success-hover: var(--success-400);
--success-active: var(--success-600);
--success-50: color-mod(var(--success-100) tint(60%) saturation(+2.5%));
--success-100: color-mod(var(--success-200) tint(50%) saturation(+2.5%));
--success-200: color-mod(var(--success-300) tint(30%) saturation(+2.5%));
--success-300: color-mod(var(--success-400) tint(20%) saturation(+2.5%));
--success-400: color-mod(var(--success) tint(10%) saturation(+2.5%));
--success-500: var(--success);
--success-600: color-mod(var(--success) shade(15%) saturation(+2.5%));
--success-700: color-mod(var(--success-600) shade(20%) saturation(+2.5%));
--success-800: color-mod(var(--success-700) shade(25%) saturation(+2.5%));
--success-900: color-mod(var(--success-800) shade(30%) saturation(+2.5%));

Info

Info
Info
50
Info
100
Info
200
Info
300
Info
400
Info
500
Info
600
Info
700
Info
800
Info
900
--info: hsl(200, 100%, 40%);
--info-hover: var(--info-400);
--info-active: var(--info-600);
--info-50: color-mod(var(--info-100) tint(60%) saturation(+2.5%));
--info-100: color-mod(var(--info-200) tint(50%) saturation(+2.5%));
--info-200: color-mod(var(--info-300) tint(30%) saturation(+2.5%));
--info-300: color-mod(var(--info-400) tint(20%) saturation(+2.5%));
--info-400: color-mod(var(--info) tint(10%) saturation(+2.5%));
--info-500: var(--info);
--info-600: color-mod(var(--info) shade(15%) saturation(+2.5%));
--info-700: color-mod(var(--info-600) shade(20%) saturation(+2.5%));
--info-800: color-mod(var(--info-700) shade(25%) saturation(+2.5%));
--info-900: color-mod(var(--info-800) shade(30%) saturation(+2.5%));