yagni.css/src/variables/_colors.css

yagni.css - collection of atomic css declarations to be embedded to your project using postcss

/* https://en.wikipedia.org/wiki/HWB_color_model */
/* http://www.workwithcolor.com/color-chart-full-01.htm */

:root {

    --black: var(--color-black, #000);
    --black-01: color(var(--black) a(1%));
    --black-02: color(var(--black) a(2%));
    --black-03: color(var(--black) a(3%));
    --black-04: color(var(--black) a(4%));
    --black-05: color(var(--black) a(5%));
    --black-06: color(var(--black) a(6%));
    --black-07: color(var(--black) a(7%));
    --black-08: color(var(--black) a(8%));
    --black-09: color(var(--black) a(9%));
    --black-10: color(var(--black) a(10%));
    --black-20: color(var(--black) a(20%));
    --black-30: color(var(--black) a(30%));
    --black-40: color(var(--black) a(40%));
    --black-50: color(var(--black) a(50%));
    --black-60: color(var(--black) a(60%));
    --black-70: color(var(--black) a(70%));
    --black-80: color(var(--black) a(80%));
    --black-90: color(var(--black) a(90%));
    --black-91: color(var(--black) a(91%));
    --black-92: color(var(--black) a(92%));
    --black-93: color(var(--black) a(93%));
    --black-94: color(var(--black) a(94%));
    --black-95: color(var(--black) a(95%));
    --black-96: color(var(--black) a(96%));
    --black-97: color(var(--black) a(97%));
    --black-98: color(var(--black) a(98%));
    --black-99: color(var(--black) a(99%));

    --white: var(--color-white, #fff);
    --white-01: color(var(--white) a(1%));
    --white-02: color(var(--white) a(2%));
    --white-03: color(var(--white) a(3%));
    --white-04: color(var(--white) a(4%));
    --white-05: color(var(--white) a(5%));
    --white-06: color(var(--white) a(6%));
    --white-07: color(var(--white) a(7%));
    --white-08: color(var(--white) a(8%));
    --white-09: color(var(--white) a(9%));
    --white-10: color(var(--white) a(10%));
    --white-20: color(var(--white) a(20%));
    --white-30: color(var(--white) a(30%));
    --white-40: color(var(--white) a(40%));
    --white-50: color(var(--white) a(50%));
    --white-60: color(var(--white) a(60%));
    --white-70: color(var(--white) a(70%));
    --white-80: color(var(--white) a(80%));
    --white-90: color(var(--white) a(90%));
    --white-91: color(var(--white) a(91%));
    --white-92: color(var(--white) a(92%));
    --white-93: color(var(--white) a(93%));
    --white-94: color(var(--white) a(94%));
    --white-95: color(var(--white) a(95%));
    --white-96: color(var(--white) a(96%));
    --white-97: color(var(--white) a(97%));
    --white-98: color(var(--white) a(98%));
    --white-99: color(var(--white) a(99%));

    --gray-016: rgb(16, 16, 16);
    --gray-032: rgb(32, 32, 32);
    --gray-048: rgb(48, 48, 48);
    --gray-064: rgb(64, 64, 64);
    --gray-080: rgb(80, 80, 80);
    --gray-096: rgb(96, 96, 96);
    --gray-112: rgb(112, 112, 112);
    --gray-128: rgb(128, 128, 128);
    --gray-144: rgb(144, 144, 144);
    --gray-160: rgb(160, 160, 160);
    --gray-176: rgb(176, 176, 176);
    --gray-192: rgb(192, 192, 192);
    --gray-208: rgb(208, 208, 208);
    --gray-224: rgb(224, 224, 224);
    --gray-240: rgb(240, 240, 240);

    --red: var(--color-red, hwb(0, 27%, 10%));
    --red-01: color(var(--red) a(1%));
    --red-02: color(var(--red) a(2%));
    --red-03: color(var(--red) a(3%));
    --red-04: color(var(--red) a(4%));
    --red-05: color(var(--red) a(5%));
    --red-06: color(var(--red) a(6%));
    --red-07: color(var(--red) a(7%));
    --red-08: color(var(--red) a(8%));
    --red-09: color(var(--red) a(9%));
    --red-10: color(var(--red) a(10%));
    --red-20: color(var(--red) a(20%));
    --red-30: color(var(--red) a(30%));
    --red-40: color(var(--red) a(40%));
    --red-50: color(var(--red) a(50%));
    --red-60: color(var(--red) a(60%));
    --red-70: color(var(--red) a(70%));
    --red-80: color(var(--red) a(80%));
    --red-90: color(var(--red) a(90%));
    --red-91: color(var(--red) a(91%));
    --red-92: color(var(--red) a(92%));
    --red-93: color(var(--red) a(93%));
    --red-94: color(var(--red) a(94%));
    --red-95: color(var(--red) a(95%));
    --red-96: color(var(--red) a(96%));
    --red-97: color(var(--red) a(97%));
    --red-98: color(var(--red) a(98%));
    --red-99: color(var(--red) a(99%));

    --orange: var(--color-orange, hwb(30, 27%, 10%));
    --orange-01: color(var(--orange) a(1%));
    --orange-02: color(var(--orange) a(2%));
    --orange-03: color(var(--orange) a(3%));
    --orange-04: color(var(--orange) a(4%));
    --orange-05: color(var(--orange) a(5%));
    --orange-06: color(var(--orange) a(6%));
    --orange-07: color(var(--orange) a(7%));
    --orange-08: color(var(--orange) a(8%));
    --orange-09: color(var(--orange) a(9%));
    --orange-10: color(var(--orange) a(10%));
    --orange-20: color(var(--orange) a(20%));
    --orange-30: color(var(--orange) a(30%));
    --orange-40: color(var(--orange) a(40%));
    --orange-50: color(var(--orange) a(50%));
    --orange-60: color(var(--orange) a(60%));
    --orange-70: color(var(--orange) a(70%));
    --orange-80: color(var(--orange) a(80%));
    --orange-90: color(var(--orange) a(90%));
    --orange-91: color(var(--orange) a(91%));
    --orange-92: color(var(--orange) a(92%));
    --orange-93: color(var(--orange) a(93%));
    --orange-94: color(var(--orange) a(94%));
    --orange-95: color(var(--orange) a(95%));
    --orange-96: color(var(--orange) a(96%));
    --orange-97: color(var(--orange) a(97%));
    --orange-98: color(var(--orange) a(98%));
    --orange-99: color(var(--orange) a(99%));

    --yellow: var(--color-yellow, hwb(60, 27%, 10%));
    --yellow-01: color(var(--yellow) a(1%));
    --yellow-02: color(var(--yellow) a(2%));
    --yellow-03: color(var(--yellow) a(3%));
    --yellow-04: color(var(--yellow) a(4%));
    --yellow-05: color(var(--yellow) a(5%));
    --yellow-06: color(var(--yellow) a(6%));
    --yellow-07: color(var(--yellow) a(7%));
    --yellow-08: color(var(--yellow) a(8%));
    --yellow-09: color(var(--yellow) a(9%));
    --yellow-10: color(var(--yellow) a(10%));
    --yellow-20: color(var(--yellow) a(20%));
    --yellow-30: color(var(--yellow) a(30%));
    --yellow-40: color(var(--yellow) a(40%));
    --yellow-50: color(var(--yellow) a(50%));
    --yellow-60: color(var(--yellow) a(60%));
    --yellow-70: color(var(--yellow) a(70%));
    --yellow-80: color(var(--yellow) a(80%));
    --yellow-90: color(var(--yellow) a(90%));
    --yellow-91: color(var(--yellow) a(91%));
    --yellow-92: color(var(--yellow) a(92%));
    --yellow-93: color(var(--yellow) a(93%));
    --yellow-94: color(var(--yellow) a(94%));
    --yellow-95: color(var(--yellow) a(95%));
    --yellow-96: color(var(--yellow) a(96%));
    --yellow-97: color(var(--yellow) a(97%));
    --yellow-98: color(var(--yellow) a(98%));
    --yellow-99: color(var(--yellow) a(99%));

    --yellow-green: var(--color-yellow-green, hwb(90, 27%, 10%));
    --yellow-green-01: color(var(--yellow-green) a(1%));
    --yellow-green-02: color(var(--yellow-green) a(2%));
    --yellow-green-03: color(var(--yellow-green) a(3%));
    --yellow-green-04: color(var(--yellow-green) a(4%));
    --yellow-green-05: color(var(--yellow-green) a(5%));
    --yellow-green-06: color(var(--yellow-green) a(6%));
    --yellow-green-07: color(var(--yellow-green) a(7%));
    --yellow-green-08: color(var(--yellow-green) a(8%));
    --yellow-green-09: color(var(--yellow-green) a(9%));
    --yellow-green-10: color(var(--yellow-green) a(10%));
    --yellow-green-20: color(var(--yellow-green) a(20%));
    --yellow-green-30: color(var(--yellow-green) a(30%));
    --yellow-green-40: color(var(--yellow-green) a(40%));
    --yellow-green-50: color(var(--yellow-green) a(50%));
    --yellow-green-60: color(var(--yellow-green) a(60%));
    --yellow-green-70: color(var(--yellow-green) a(70%));
    --yellow-green-80: color(var(--yellow-green) a(80%));
    --yellow-green-90: color(var(--yellow-green) a(90%));
    --yellow-green-91: color(var(--yellow-green) a(91%));
    --yellow-green-92: color(var(--yellow-green) a(92%));
    --yellow-green-93: color(var(--yellow-green) a(93%));
    --yellow-green-94: color(var(--yellow-green) a(94%));
    --yellow-green-95: color(var(--yellow-green) a(95%));
    --yellow-green-96: color(var(--yellow-green) a(96%));
    --yellow-green-97: color(var(--yellow-green) a(97%));
    --yellow-green-98: color(var(--yellow-green) a(98%));
    --yellow-green-99: color(var(--yellow-green) a(99%));

    --green: var(--color-green, hwb(120, 27%, 10%));
    --green-01: color(var(--green) a(1%));
    --green-02: color(var(--green) a(2%));
    --green-03: color(var(--green) a(3%));
    --green-04: color(var(--green) a(4%));
    --green-05: color(var(--green) a(5%));
    --green-06: color(var(--green) a(6%));
    --green-07: color(var(--green) a(7%));
    --green-08: color(var(--green) a(8%));
    --green-09: color(var(--green) a(9%));
    --green-10: color(var(--green) a(10%));
    --green-20: color(var(--green) a(20%));
    --green-30: color(var(--green) a(30%));
    --green-40: color(var(--green) a(40%));
    --green-50: color(var(--green) a(50%));
    --green-60: color(var(--green) a(60%));
    --green-70: color(var(--green) a(70%));
    --green-80: color(var(--green) a(80%));
    --green-90: color(var(--green) a(90%));
    --green-91: color(var(--green) a(91%));
    --green-92: color(var(--green) a(92%));
    --green-93: color(var(--green) a(93%));
    --green-94: color(var(--green) a(94%));
    --green-95: color(var(--green) a(95%));
    --green-96: color(var(--green) a(96%));
    --green-97: color(var(--green) a(97%));
    --green-98: color(var(--green) a(98%));
    --green-99: color(var(--green) a(99%));

    --green-cyan: var(--color-green-cyan, hwb(150, 27%, 10%));
    --green-cyan-01: color(var(--green-cyan) a(1%));
    --green-cyan-02: color(var(--green-cyan) a(2%));
    --green-cyan-03: color(var(--green-cyan) a(3%));
    --green-cyan-04: color(var(--green-cyan) a(4%));
    --green-cyan-05: color(var(--green-cyan) a(5%));
    --green-cyan-06: color(var(--green-cyan) a(6%));
    --green-cyan-07: color(var(--green-cyan) a(7%));
    --green-cyan-08: color(var(--green-cyan) a(8%));
    --green-cyan-09: color(var(--green-cyan) a(9%));
    --green-cyan-10: color(var(--green-cyan) a(10%));
    --green-cyan-20: color(var(--green-cyan) a(20%));
    --green-cyan-30: color(var(--green-cyan) a(30%));
    --green-cyan-40: color(var(--green-cyan) a(40%));
    --green-cyan-50: color(var(--green-cyan) a(50%));
    --green-cyan-60: color(var(--green-cyan) a(60%));
    --green-cyan-70: color(var(--green-cyan) a(70%));
    --green-cyan-80: color(var(--green-cyan) a(80%));
    --green-cyan-90: color(var(--green-cyan) a(90%));
    --green-cyan-91: color(var(--green-cyan) a(91%));
    --green-cyan-92: color(var(--green-cyan) a(92%));
    --green-cyan-93: color(var(--green-cyan) a(93%));
    --green-cyan-94: color(var(--green-cyan) a(94%));
    --green-cyan-95: color(var(--green-cyan) a(95%));
    --green-cyan-96: color(var(--green-cyan) a(96%));
    --green-cyan-97: color(var(--green-cyan) a(97%));
    --green-cyan-98: color(var(--green-cyan) a(98%));
    --green-cyan-99: color(var(--green-cyan) a(99%));

    --cyan: var(--color-cyan, hwb(180, 27%, 10%));
    --cyan-01: color(var(--cyan) a(1%));
    --cyan-02: color(var(--cyan) a(2%));
    --cyan-03: color(var(--cyan) a(3%));
    --cyan-04: color(var(--cyan) a(4%));
    --cyan-05: color(var(--cyan) a(5%));
    --cyan-06: color(var(--cyan) a(6%));
    --cyan-07: color(var(--cyan) a(7%));
    --cyan-08: color(var(--cyan) a(8%));
    --cyan-09: color(var(--cyan) a(9%));
    --cyan-10: color(var(--cyan) a(10%));
    --cyan-20: color(var(--cyan) a(20%));
    --cyan-30: color(var(--cyan) a(30%));
    --cyan-40: color(var(--cyan) a(40%));
    --cyan-50: color(var(--cyan) a(50%));
    --cyan-60: color(var(--cyan) a(60%));
    --cyan-70: color(var(--cyan) a(70%));
    --cyan-80: color(var(--cyan) a(80%));
    --cyan-90: color(var(--cyan) a(90%));
    --cyan-91: color(var(--cyan) a(91%));
    --cyan-92: color(var(--cyan) a(92%));
    --cyan-93: color(var(--cyan) a(93%));
    --cyan-94: color(var(--cyan) a(94%));
    --cyan-95: color(var(--cyan) a(95%));
    --cyan-96: color(var(--cyan) a(96%));
    --cyan-97: color(var(--cyan) a(97%));
    --cyan-98: color(var(--cyan) a(98%));
    --cyan-99: color(var(--cyan) a(99%));

    --cyan-blue: var(--color-cyan-blue, hwb(210, 27%, 10%));
    --cyan-blue-01: color(var(--cyan-blue) a(1%));
    --cyan-blue-02: color(var(--cyan-blue) a(2%));
    --cyan-blue-03: color(var(--cyan-blue) a(3%));
    --cyan-blue-04: color(var(--cyan-blue) a(4%));
    --cyan-blue-05: color(var(--cyan-blue) a(5%));
    --cyan-blue-06: color(var(--cyan-blue) a(6%));
    --cyan-blue-07: color(var(--cyan-blue) a(7%));
    --cyan-blue-08: color(var(--cyan-blue) a(8%));
    --cyan-blue-09: color(var(--cyan-blue) a(9%));
    --cyan-blue-10: color(var(--cyan-blue) a(10%));
    --cyan-blue-20: color(var(--cyan-blue) a(20%));
    --cyan-blue-30: color(var(--cyan-blue) a(30%));
    --cyan-blue-40: color(var(--cyan-blue) a(40%));
    --cyan-blue-50: color(var(--cyan-blue) a(50%));
    --cyan-blue-60: color(var(--cyan-blue) a(60%));
    --cyan-blue-70: color(var(--cyan-blue) a(70%));
    --cyan-blue-80: color(var(--cyan-blue) a(80%));
    --cyan-blue-90: color(var(--cyan-blue) a(90%));
    --cyan-blue-91: color(var(--cyan-blue) a(91%));
    --cyan-blue-92: color(var(--cyan-blue) a(92%));
    --cyan-blue-93: color(var(--cyan-blue) a(93%));
    --cyan-blue-94: color(var(--cyan-blue) a(94%));
    --cyan-blue-95: color(var(--cyan-blue) a(95%));
    --cyan-blue-96: color(var(--cyan-blue) a(96%));
    --cyan-blue-97: color(var(--cyan-blue) a(97%));
    --cyan-blue-98: color(var(--cyan-blue) a(98%));
    --cyan-blue-99: color(var(--cyan-blue) a(99%));

    --blue: var(--color-blue, hwb(240, 27%, 10%));
    --blue-01: color(var(--blue) a(1%));
    --blue-02: color(var(--blue) a(2%));
    --blue-03: color(var(--blue) a(3%));
    --blue-04: color(var(--blue) a(4%));
    --blue-05: color(var(--blue) a(5%));
    --blue-06: color(var(--blue) a(6%));
    --blue-07: color(var(--blue) a(7%));
    --blue-08: color(var(--blue) a(8%));
    --blue-09: color(var(--blue) a(9%));
    --blue-10: color(var(--blue) a(10%));
    --blue-20: color(var(--blue) a(20%));
    --blue-30: color(var(--blue) a(30%));
    --blue-40: color(var(--blue) a(40%));
    --blue-50: color(var(--blue) a(50%));
    --blue-60: color(var(--blue) a(60%));
    --blue-70: color(var(--blue) a(70%));
    --blue-80: color(var(--blue) a(80%));
    --blue-90: color(var(--blue) a(90%));
    --blue-91: color(var(--blue) a(91%));
    --blue-92: color(var(--blue) a(92%));
    --blue-93: color(var(--blue) a(93%));
    --blue-94: color(var(--blue) a(94%));
    --blue-95: color(var(--blue) a(95%));
    --blue-96: color(var(--blue) a(96%));
    --blue-97: color(var(--blue) a(97%));
    --blue-98: color(var(--blue) a(98%));
    --blue-99: color(var(--blue) a(99%));

    --blue-magenta: var(--color-blue-magenta, hwb(270, 27%, 10%));
    --blue-magenta-01: color(var(--blue-magenta) a(1%));
    --blue-magenta-02: color(var(--blue-magenta) a(2%));
    --blue-magenta-03: color(var(--blue-magenta) a(3%));
    --blue-magenta-04: color(var(--blue-magenta) a(4%));
    --blue-magenta-05: color(var(--blue-magenta) a(5%));
    --blue-magenta-06: color(var(--blue-magenta) a(6%));
    --blue-magenta-07: color(var(--blue-magenta) a(7%));
    --blue-magenta-08: color(var(--blue-magenta) a(8%));
    --blue-magenta-09: color(var(--blue-magenta) a(9%));
    --blue-magenta-10: color(var(--blue-magenta) a(10%));
    --blue-magenta-20: color(var(--blue-magenta) a(20%));
    --blue-magenta-30: color(var(--blue-magenta) a(30%));
    --blue-magenta-40: color(var(--blue-magenta) a(40%));
    --blue-magenta-50: color(var(--blue-magenta) a(50%));
    --blue-magenta-60: color(var(--blue-magenta) a(60%));
    --blue-magenta-70: color(var(--blue-magenta) a(70%));
    --blue-magenta-80: color(var(--blue-magenta) a(80%));
    --blue-magenta-90: color(var(--blue-magenta) a(90%));
    --blue-magenta-91: color(var(--blue-magenta) a(91%));
    --blue-magenta-92: color(var(--blue-magenta) a(92%));
    --blue-magenta-93: color(var(--blue-magenta) a(93%));
    --blue-magenta-94: color(var(--blue-magenta) a(94%));
    --blue-magenta-95: color(var(--blue-magenta) a(95%));
    --blue-magenta-96: color(var(--blue-magenta) a(96%));
    --blue-magenta-97: color(var(--blue-magenta) a(97%));
    --blue-magenta-98: color(var(--blue-magenta) a(98%));
    --blue-magenta-99: color(var(--blue-magenta) a(99%));

    --magenta: var(--color-magenta, hwb(300, 27%, 10%));
    --magenta-01: color(var(--magenta) a(1%));
    --magenta-02: color(var(--magenta) a(2%));
    --magenta-03: color(var(--magenta) a(3%));
    --magenta-04: color(var(--magenta) a(4%));
    --magenta-05: color(var(--magenta) a(5%));
    --magenta-06: color(var(--magenta) a(6%));
    --magenta-07: color(var(--magenta) a(7%));
    --magenta-08: color(var(--magenta) a(8%));
    --magenta-09: color(var(--magenta) a(9%));
    --magenta-10: color(var(--magenta) a(10%));
    --magenta-20: color(var(--magenta) a(20%));
    --magenta-30: color(var(--magenta) a(30%));
    --magenta-40: color(var(--magenta) a(40%));
    --magenta-50: color(var(--magenta) a(50%));
    --magenta-60: color(var(--magenta) a(60%));
    --magenta-70: color(var(--magenta) a(70%));
    --magenta-80: color(var(--magenta) a(80%));
    --magenta-90: color(var(--magenta) a(90%));
    --magenta-91: color(var(--magenta) a(91%));
    --magenta-92: color(var(--magenta) a(92%));
    --magenta-93: color(var(--magenta) a(93%));
    --magenta-94: color(var(--magenta) a(94%));
    --magenta-95: color(var(--magenta) a(95%));
    --magenta-96: color(var(--magenta) a(96%));
    --magenta-97: color(var(--magenta) a(97%));
    --magenta-98: color(var(--magenta) a(98%));
    --magenta-99: color(var(--magenta) a(99%));

    --magenta-red: var(--color-magenta-red, hwb(330, 27%, 10%));
    --magenta-red-01: color(var(--magenta-red) a(1%));
    --magenta-red-02: color(var(--magenta-red) a(2%));
    --magenta-red-03: color(var(--magenta-red) a(3%));
    --magenta-red-04: color(var(--magenta-red) a(4%));
    --magenta-red-05: color(var(--magenta-red) a(5%));
    --magenta-red-06: color(var(--magenta-red) a(6%));
    --magenta-red-07: color(var(--magenta-red) a(7%));
    --magenta-red-08: color(var(--magenta-red) a(8%));
    --magenta-red-09: color(var(--magenta-red) a(9%));
    --magenta-red-10: color(var(--magenta-red) a(10%));
    --magenta-red-20: color(var(--magenta-red) a(20%));
    --magenta-red-30: color(var(--magenta-red) a(30%));
    --magenta-red-40: color(var(--magenta-red) a(40%));
    --magenta-red-50: color(var(--magenta-red) a(50%));
    --magenta-red-60: color(var(--magenta-red) a(60%));
    --magenta-red-70: color(var(--magenta-red) a(70%));
    --magenta-red-80: color(var(--magenta-red) a(80%));
    --magenta-red-90: color(var(--magenta-red) a(90%));
    --magenta-red-91: color(var(--magenta-red) a(91%));
    --magenta-red-92: color(var(--magenta-red) a(92%));
    --magenta-red-93: color(var(--magenta-red) a(93%));
    --magenta-red-94: color(var(--magenta-red) a(94%));
    --magenta-red-95: color(var(--magenta-red) a(95%));
    --magenta-red-96: color(var(--magenta-red) a(96%));
    --magenta-red-97: color(var(--magenta-red) a(97%));
    --magenta-red-98: color(var(--magenta-red) a(98%));
    --magenta-red-99: color(var(--magenta-red) a(99%));

}