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
50
Light
100
100
Light
200
200
Light
300
300
Light
400
400
Light
500
500
Light
600
600
Light
700
700
Light
800
800
Light
900
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
50
Grey
100
100
Grey
200
200
Grey
300
300
Grey
400
400
Grey
500
500
Grey
600
600
Grey
700
700
Grey
800
800
Grey
900
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
50
Dark
100
100
Dark
200
200
Dark
300
300
Dark
400
400
Dark
500
500
Dark
600
600
Dark
700
700
Dark
800
800
Dark
900
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
50
Primary
100
100
Primary
200
200
Primary
300
300
Primary
400
400
Primary
500
500
Primary
600
600
Primary
700
700
Primary
800
800
Primary
900
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
50
Secondary
100
100
Secondary
200
200
Secondary
300
300
Secondary
400
400
Secondary
500
500
Secondary
600
600
Secondary
700
700
Secondary
800
800
Secondary
900
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
50
Tertiary
100
100
Tertiary
200
200
Tertiary
300
300
Tertiary
400
400
Tertiary
500
500
Tertiary
600
600
Tertiary
700
700
Tertiary
800
800
Tertiary
900
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
50
Error
100
100
Error
200
200
Error
300
300
Error
400
400
Error
500
500
Error
600
600
Error
700
700
Error
800
800
Error
900
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
50
Warning
100
100
Warning
200
200
Warning
300
300
Warning
400
400
Warning
500
500
Warning
600
600
Warning
700
700
Warning
800
800
Warning
900
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
50
Success
100
100
Success
200
200
Success
300
300
Success
400
400
Success
500
500
Success
600
600
Success
700
700
Success
800
800
Success
900
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
50
Info
100
100
Info
200
200
Info
300
300
Info
400
400
Info
500
500
Info
600
600
Info
700
700
Info
800
800
Info
900
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%));