Home

WayneCarl Barker's Portfolio/ Blog

Go Back

Rainbow Maker!

WayneCarl

September 22, 2022

Rainbow Maker

  function generateHslaColors(saturation, lightness, alpha, amount) {
    let colors = []
    let huedelta = Math.trunc(360 / amount)

    for (let i = 0; i < amount; i++) {
        let hue = i * huedelta
        colors.push(`hsla(${hue},${saturation}%,${lightness}%,${alpha})`)
    }

    return colors
}

let c = generateHslaColors(100, 50, 1.0, 360);
console.log(c);

function makeDiv(c) {
    c.forEach((h) => {

        $(body).append(`<div style="background-color:${h}">Hello</div>`)
    });
}

makeDiv(c);

Here is the array of all hsla colors if you were curious :)

  allHSLAcolors = ["hsla(0,100%,50%,1)",
        "hsla(1,100%,50%,1)",
        "hsla(2,100%,50%,1)",
        "hsla(3,100%,50%,1)",
        "hsla(4,100%,50%,1)",
        "hsla(5,100%,50%,1)",
        "hsla(6,100%,50%,1)",
        "hsla(7,100%,50%,1)",
        "hsla(8,100%,50%,1)",
        "hsla(9,100%,50%,1)",
        "hsla(10,100%,50%,1)",
        "hsla(11,100%,50%,1)",
        "hsla(12,100%,50%,1)",
        "hsla(13,100%,50%,1)",
        "hsla(14,100%,50%,1)",
        "hsla(15,100%,50%,1)",
        "hsla(16,100%,50%,1)",
        "hsla(17,100%,50%,1)",
        "hsla(18,100%,50%,1)",
        "hsla(19,100%,50%,1)",
        "hsla(20,100%,50%,1)",
        "hsla(21,100%,50%,1)",
        "hsla(22,100%,50%,1)",
        "hsla(23,100%,50%,1)",
        "hsla(24,100%,50%,1)",
        "hsla(25,100%,50%,1)",
        "hsla(26,100%,50%,1)",
        "hsla(27,100%,50%,1)",
        "hsla(28,100%,50%,1)",
        "hsla(29,100%,50%,1)",
        "hsla(30,100%,50%,1)",
        "hsla(31,100%,50%,1)",
        "hsla(32,100%,50%,1)",
        "hsla(33,100%,50%,1)",
        "hsla(34,100%,50%,1)",
        "hsla(35,100%,50%,1)",
        "hsla(36,100%,50%,1)",
        "hsla(37,100%,50%,1)",
        "hsla(38,100%,50%,1)",
        "hsla(39,100%,50%,1)",
        "hsla(40,100%,50%,1)",
        "hsla(41,100%,50%,1)",
        "hsla(42,100%,50%,1)",
        "hsla(43,100%,50%,1)",
        "hsla(44,100%,50%,1)",
        "hsla(45,100%,50%,1)",
        "hsla(46,100%,50%,1)",
        "hsla(47,100%,50%,1)",
        "hsla(48,100%,50%,1)",
        "hsla(49,100%,50%,1)",
        "hsla(50,100%,50%,1)",
        "hsla(51,100%,50%,1)",
        "hsla(52,100%,50%,1)",
        "hsla(53,100%,50%,1)",
        "hsla(54,100%,50%,1)",
        "hsla(55,100%,50%,1)",
        "hsla(56,100%,50%,1)",
        "hsla(57,100%,50%,1)",
        "hsla(58,100%,50%,1)",
        "hsla(59,100%,50%,1)",
        "hsla(60,100%,50%,1)",
        "hsla(61,100%,50%,1)",
        "hsla(62,100%,50%,1)",
        "hsla(63,100%,50%,1)",
        "hsla(64,100%,50%,1)",
        "hsla(65,100%,50%,1)",
        "hsla(66,100%,50%,1)",
        "hsla(67,100%,50%,1)",
        "hsla(68,100%,50%,1)",
        "hsla(69,100%,50%,1)",
        "hsla(70,100%,50%,1)",
        "hsla(71,100%,50%,1)",
        "hsla(72,100%,50%,1)",
        "hsla(73,100%,50%,1)",
        "hsla(74,100%,50%,1)",
        "hsla(75,100%,50%,1)",
        "hsla(76,100%,50%,1)",
        "hsla(77,100%,50%,1)",
        "hsla(78,100%,50%,1)",
        "hsla(79,100%,50%,1)",
        "hsla(80,100%,50%,1)",
        "hsla(81,100%,50%,1)",
        "hsla(82,100%,50%,1)",
        "hsla(83,100%,50%,1)",
        "hsla(84,100%,50%,1)",
        "hsla(85,100%,50%,1)",
        "hsla(86,100%,50%,1)",
        "hsla(87,100%,50%,1)",
        "hsla(88,100%,50%,1)",
        "hsla(89,100%,50%,1)",
        "hsla(90,100%,50%,1)",
        "hsla(91,100%,50%,1)",
        "hsla(92,100%,50%,1)",
        "hsla(93,100%,50%,1)",
        "hsla(94,100%,50%,1)",
        "hsla(95,100%,50%,1)",
        "hsla(96,100%,50%,1)",
        "hsla(97,100%,50%,1)",
        "hsla(98,100%,50%,1)",
        "hsla(99,100%,50%,1)",
        "hsla(100,100%,50%,1)",
        "hsla(101,100%,50%,1)",
        "hsla(102,100%,50%,1)",
        "hsla(103,100%,50%,1)",
        "hsla(104,100%,50%,1)",
        "hsla(105,100%,50%,1)",
        "hsla(106,100%,50%,1)",
        "hsla(107,100%,50%,1)",
        "hsla(108,100%,50%,1)",
        "hsla(109,100%,50%,1)",
        "hsla(110,100%,50%,1)",
        "hsla(111,100%,50%,1)",
        "hsla(112,100%,50%,1)",
        "hsla(113,100%,50%,1)",
        "hsla(114,100%,50%,1)",
        "hsla(115,100%,50%,1)",
        "hsla(116,100%,50%,1)",
        "hsla(117,100%,50%,1)",
        "hsla(118,100%,50%,1)",
        "hsla(119,100%,50%,1)",
        "hsla(120,100%,50%,1)",
        "hsla(121,100%,50%,1)",
        "hsla(122,100%,50%,1)",
        "hsla(123,100%,50%,1)",
        "hsla(124,100%,50%,1)",
        "hsla(125,100%,50%,1)",
        "hsla(126,100%,50%,1)",
        "hsla(127,100%,50%,1)",
        "hsla(128,100%,50%,1)",
        "hsla(129,100%,50%,1)",
        "hsla(130,100%,50%,1)",
        "hsla(131,100%,50%,1)",
        "hsla(132,100%,50%,1)",
        "hsla(133,100%,50%,1)",
        "hsla(134,100%,50%,1)",
        "hsla(135,100%,50%,1)",
        "hsla(136,100%,50%,1)",
        "hsla(137,100%,50%,1)",
        "hsla(138,100%,50%,1)",
        "hsla(139,100%,50%,1)",
        "hsla(140,100%,50%,1)",
        "hsla(141,100%,50%,1)",
        "hsla(142,100%,50%,1)",
        "hsla(143,100%,50%,1)",
        "hsla(144,100%,50%,1)",
        "hsla(145,100%,50%,1)",
        "hsla(146,100%,50%,1)",
        "hsla(147,100%,50%,1)",
        "hsla(148,100%,50%,1)",
        "hsla(149,100%,50%,1)",
        "hsla(150,100%,50%,1)",
        "hsla(151,100%,50%,1)",
        "hsla(152,100%,50%,1)",
        "hsla(153,100%,50%,1)",
        "hsla(154,100%,50%,1)",
        "hsla(155,100%,50%,1)",
        "hsla(156,100%,50%,1)",
        "hsla(157,100%,50%,1)",
        "hsla(158,100%,50%,1)",
        "hsla(159,100%,50%,1)",
        "hsla(160,100%,50%,1)",
        "hsla(161,100%,50%,1)",
        "hsla(162,100%,50%,1)",
        "hsla(163,100%,50%,1)",
        "hsla(164,100%,50%,1)",
        "hsla(165,100%,50%,1)",
        "hsla(166,100%,50%,1)",
        "hsla(167,100%,50%,1)",
        "hsla(168,100%,50%,1)",
        "hsla(169,100%,50%,1)",
        "hsla(170,100%,50%,1)",
        "hsla(171,100%,50%,1)",
        "hsla(172,100%,50%,1)",
        "hsla(173,100%,50%,1)",
        "hsla(174,100%,50%,1)",
        "hsla(175,100%,50%,1)",
        "hsla(176,100%,50%,1)",
        "hsla(177,100%,50%,1)",
        "hsla(178,100%,50%,1)",
        "hsla(179,100%,50%,1)",
        "hsla(180,100%,50%,1)",
        "hsla(181,100%,50%,1)",
        "hsla(182,100%,50%,1)",
        "hsla(183,100%,50%,1)",
        "hsla(184,100%,50%,1)",
        "hsla(185,100%,50%,1)",
        "hsla(186,100%,50%,1)",
        "hsla(187,100%,50%,1)",
        "hsla(188,100%,50%,1)",
        "hsla(189,100%,50%,1)",
        "hsla(190,100%,50%,1)",
        "hsla(191,100%,50%,1)",
        "hsla(192,100%,50%,1)",
        "hsla(193,100%,50%,1)",
        "hsla(194,100%,50%,1)",
        "hsla(195,100%,50%,1)",
        "hsla(196,100%,50%,1)",
        "hsla(197,100%,50%,1)",
        "hsla(198,100%,50%,1)",
        "hsla(199,100%,50%,1)",
        "hsla(200,100%,50%,1)",
        "hsla(201,100%,50%,1)",
        "hsla(202,100%,50%,1)",
        "hsla(203,100%,50%,1)",
        "hsla(204,100%,50%,1)",
        "hsla(205,100%,50%,1)",
        "hsla(206,100%,50%,1)",
        "hsla(207,100%,50%,1)",
        "hsla(208,100%,50%,1)",
        "hsla(209,100%,50%,1)",
        "hsla(210,100%,50%,1)",
        "hsla(211,100%,50%,1)",
        "hsla(212,100%,50%,1)",
        "hsla(213,100%,50%,1)",
        "hsla(214,100%,50%,1)",
        "hsla(215,100%,50%,1)",
        "hsla(216,100%,50%,1)",
        "hsla(217,100%,50%,1)",
        "hsla(218,100%,50%,1)",
        "hsla(219,100%,50%,1)",
        "hsla(220,100%,50%,1)",
        "hsla(221,100%,50%,1)",
        "hsla(222,100%,50%,1)",
        "hsla(223,100%,50%,1)",
        "hsla(224,100%,50%,1)",
        "hsla(225,100%,50%,1)",
        "hsla(226,100%,50%,1)",
        "hsla(227,100%,50%,1)",
        "hsla(228,100%,50%,1)",
        "hsla(229,100%,50%,1)",
        "hsla(230,100%,50%,1)",
        "hsla(231,100%,50%,1)",
        "hsla(232,100%,50%,1)",
        "hsla(233,100%,50%,1)",
        "hsla(234,100%,50%,1)",
        "hsla(235,100%,50%,1)",
        "hsla(236,100%,50%,1)",
        "hsla(237,100%,50%,1)",
        "hsla(238,100%,50%,1)",
        "hsla(239,100%,50%,1)",
        "hsla(240,100%,50%,1)",
        "hsla(241,100%,50%,1)",
        "hsla(242,100%,50%,1)",
        "hsla(243,100%,50%,1)",
        "hsla(244,100%,50%,1)",
        "hsla(245,100%,50%,1)",
        "hsla(246,100%,50%,1)",
        "hsla(247,100%,50%,1)",
        "hsla(248,100%,50%,1)",
        "hsla(249,100%,50%,1)",
        "hsla(250,100%,50%,1)",
        "hsla(251,100%,50%,1)",
        "hsla(252,100%,50%,1)",
        "hsla(253,100%,50%,1)",
        "hsla(254,100%,50%,1)",
        "hsla(255,100%,50%,1)",
        "hsla(256,100%,50%,1)",
        "hsla(257,100%,50%,1)",
        "hsla(258,100%,50%,1)",
        "hsla(259,100%,50%,1)",
        "hsla(260,100%,50%,1)",
        "hsla(261,100%,50%,1)",
        "hsla(262,100%,50%,1)",
        "hsla(263,100%,50%,1)",
        "hsla(264,100%,50%,1)",
        "hsla(265,100%,50%,1)",
        "hsla(266,100%,50%,1)",
        "hsla(267,100%,50%,1)",
        "hsla(268,100%,50%,1)",
        "hsla(269,100%,50%,1)",
        "hsla(270,100%,50%,1)",
        "hsla(271,100%,50%,1)",
        "hsla(272,100%,50%,1)",
        "hsla(273,100%,50%,1)",
        "hsla(274,100%,50%,1)",
        "hsla(275,100%,50%,1)",
        "hsla(276,100%,50%,1)",
        "hsla(277,100%,50%,1)",
        "hsla(278,100%,50%,1)",
        "hsla(279,100%,50%,1)",
        "hsla(280,100%,50%,1)",
        "hsla(281,100%,50%,1)",
        "hsla(282,100%,50%,1)",
        "hsla(283,100%,50%,1)",
        "hsla(284,100%,50%,1)",
        "hsla(285,100%,50%,1)",
        "hsla(286,100%,50%,1)",
        "hsla(287,100%,50%,1)",
        "hsla(288,100%,50%,1)",
        "hsla(289,100%,50%,1)",
        "hsla(290,100%,50%,1)",
        "hsla(291,100%,50%,1)",
        "hsla(292,100%,50%,1)",
        "hsla(293,100%,50%,1)",
        "hsla(294,100%,50%,1)",
        "hsla(295,100%,50%,1)",
        "hsla(296,100%,50%,1)",
        "hsla(297,100%,50%,1)",
        "hsla(298,100%,50%,1)",
        "hsla(299,100%,50%,1)",
        "hsla(300,100%,50%,1)",
        "hsla(301,100%,50%,1)",
        "hsla(302,100%,50%,1)",
        "hsla(303,100%,50%,1)",
        "hsla(304,100%,50%,1)",
        "hsla(305,100%,50%,1)",
        "hsla(306,100%,50%,1)",
        "hsla(307,100%,50%,1)",
        "hsla(308,100%,50%,1)",
        "hsla(309,100%,50%,1)",
        "hsla(310,100%,50%,1)",
        "hsla(311,100%,50%,1)",
        "hsla(312,100%,50%,1)",
        "hsla(313,100%,50%,1)",
        "hsla(314,100%,50%,1)",
        "hsla(315,100%,50%,1)",
        "hsla(316,100%,50%,1)",
        "hsla(317,100%,50%,1)",
        "hsla(318,100%,50%,1)",
        "hsla(319,100%,50%,1)",
        "hsla(320,100%,50%,1)",
        "hsla(321,100%,50%,1)",
        "hsla(322,100%,50%,1)",
        "hsla(323,100%,50%,1)",
        "hsla(324,100%,50%,1)",
        "hsla(325,100%,50%,1)",
        "hsla(326,100%,50%,1)",
        "hsla(327,100%,50%,1)",
        "hsla(328,100%,50%,1)",
        "hsla(329,100%,50%,1)",
        "hsla(330,100%,50%,1)",
        "hsla(331,100%,50%,1)",
        "hsla(332,100%,50%,1)",
        "hsla(333,100%,50%,1)",
        "hsla(334,100%,50%,1)",
        "hsla(335,100%,50%,1)",
        "hsla(336,100%,50%,1)",
        "hsla(337,100%,50%,1)",
        "hsla(338,100%,50%,1)",
        "hsla(339,100%,50%,1)",
        "hsla(340,100%,50%,1)",
        "hsla(341,100%,50%,1)",
        "hsla(342,100%,50%,1)",
        "hsla(343,100%,50%,1)",
        "hsla(344,100%,50%,1)",
        "hsla(345,100%,50%,1)",
        "hsla(346,100%,50%,1)",
        "hsla(347,100%,50%,1)",
        "hsla(348,100%,50%,1)",
        "hsla(349,100%,50%,1)",
        "hsla(350,100%,50%,1)",
        "hsla(351,100%,50%,1)",
        "hsla(352,100%,50%,1)",
        "hsla(353,100%,50%,1)",
        "hsla(354,100%,50%,1)",
        "hsla(355,100%,50%,1)",
        "hsla(356,100%,50%,1)",
        "hsla(357,100%,50%,1)",
        "hsla(358,100%,50%,1)",
        "hsla(359,100%,50%,1)"];