HISE Logo Forum
    • Categories
    • Register
    • Login

    HSL Colours

    Scheduled Pinned Locked Moved Scripting
    colourhslsaturationlightness
    3 Posts 2 Posters 157 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • d.healeyD
      d.healey
      last edited by d.healey

      I'm working with material design colour palettes and these are usually represented as HSL. So I added wrappers around the JUCE to/from HSL functions.

      The hue value is normalised, so if the palette you're working with provides the hue in degrees you'll need to divide it by 360 when passing it to the Colours.fromHsl function.

      PR: https://github.com/christophhart/HISE/pull/641

      Libre Wave - Freedom respecting instruments and effects
      My Patreon - HISE tutorials
      YouTube Channel - Public HISE tutorials

      d.healeyD 1 Reply Last reply Reply Quote 8
      • d.healeyD
        d.healey @d.healey
        last edited by d.healey

        Here is a fun little snippet. There are two main functions, and a couple of helper functions.

        The main functions are generatePalette. You pass it a single colour and it will create a range of shades, similar to the material design examples. The saturation and hue are adjusted automatically to give a pleasing colour scale.

        In the image below this function is used to create the palette strip with the numbers below it added in a panel's paint routine.

        The second function is getTextColour This one is for getting a colour that will be drawn over another colour. It takes a base colour, the background colour, and the shade index (between 0 - 1). This should work nicely when moving between light or dark themes.

        In the image the two panels with "This is some text" both have the same text colour set, the only difference is the background colour property and the function above chooses a shade of the text colour that stands out on the background.

        I was following a lot of info from this article (although it doesn't use HSL so I had to adapt) - https://matthewstrom.com/writing/generating-color-palettes/

        HiseSnippet 1501.3oc4XstaaaCElJIpK1aEXEaO.b9WJstt9VbRZVwbttFrlVi5rhAjk0QKQaQTYRCI55XLTf9hUf8Hs2fryQTxV9RR6xV+0LbjMOW+32g9PxzJT4xihTgDq7mMd.mX8U1sGK09G3yDRxIGRr9FaWUfZXXKV.Wq4mwizj8GOfEEw8HVVq9ingV4ViD+5u9g8YALoKepHB4UJgK+Yh9B8TosZ9ShffiYd7yD8yXc8lm3pjGDmRh0p1kICXtug0i+bFZ1J1jmxh7IV22t7lM37sp00yiUqlWiFM1Y6cpuSEV2x0YcpzXm5UquU0s2pKw5NG4Izpv1ZllGQrVaek2319pQRSBdkHRzIfiCpPZCY1H9XUfGNEQojC7EAdsRYqHBDkVS4tUMb22ZepvSLQ9TN7qiUPm5QVBzZkYg2py.uJYgW4LvaIPxJCjVy.o6Y21MTLPOUChmuz9DolG1kA0orPwXKYEcN6CTfERco9r2vONDFLwCmFkKWjBO1X274gZUjl9VVHsESxCpPeBM0ydb8Ap9CTRXfSAi5BnOluVJhqaADj9kpgZgj6zcnzUKTRmdaj+OxmCiICBm1WDgw5YJWVv9pgRuHGL0wFLBLfcd0KnOhVobhr.VGdPDn37cPftM9XqDHWjtI9nN9nF9nJ9nhQwEIAXfYkNDgdbIODpJIq8cRwhSgN8LKQKrABk745pBoNBvkx6REzuOMFkB3xdZeP1CdvF4yASqb8vItwYmDqNWbAFEPUW32Duj6pcNeD89TQQXxU4hhzQvaiIyE.yGQkF4Kz7jX.ZOVgT9KtbLLAJ.yupIp7BYi1KPzSx8Nieo1wPUP5KRSS3njrUjVvEJbgbOrlk6c4e2RJ2Uu4xc0ok6p+qK24Snm8BBtg5PVxAL.mkIil5idhvBaTjtrXUjVtzlwQbQNqvYfCT3cjpOmhwBXX1rz0x3pZ2LWUaJWU6+eb0idz2QONYRFkWHCfYMMcV+XpIWzYAYGVD270TCJR6.6UzKDYh40D4Ca0bhzie4ioxg86vCiox.j5ncbiKNleKoUOMJvY9HgSPiwKy1TjfykbtmW9h3lG519htZt2SGxcPgYQAzDBCoK766YrsMSODZ4fE6rF6F2G.Y5XmphNUg9P.4v2wjFxA+jS.V2PUeDZtHCmeQFcuvP13E5usHklgjB4QCCzXe03DNeGuJky1k6ShpvtY2.YIh6pmPT2HSkZ4LrTJMAZe.sxFIaQ.xMSjRCFF46rHeY51kaBiZrd4rnYgzbfGmhvmoZg4Q1UcEo8YWFa8LqCSRVhu.fSsB6Ji9CvuVixehvHK0rXxmnbp3HMmOPBGPHKnnvKSc7RfFiCztnrLJvtPyDR.tSh0tYLry7FlUYzT2eB8g0gXvf+Nko8KMPMxw4RXgNVTgsq2.nlNFeiejvaw1Bw2obIXYfYjP5TAGMM5Xs8cozFUIetRyegzIt..DKcdUc6tTcXW7PUP.ObopwyyFdSN5jx5ukELjOwP3LaydPP6q+ffYOmpqYSkLFpjmHE5WLfKutSuRR1IB91OexgLMCO8XhLvtA7Ps.gf0g72Bmc2bVxb1GxidiVM.h5jsuHVegNV6cSOoItEFQ.mmbcayI8HWN838G1b7jAu+7liDdZ+IBZ99l9bQO+LWS32ZltSCH6NDxUWEKNS5W+ij9pWW5aplK8+dz7oGP3ro+WiS+zMEusfp10Ap+bz+TP8gOb0MApEuR.bYDk2v.ld1anf2iKQArZclqEfG8WFIziydOu+yt1xmJDumcKg10e4XbkkfQXM8mCLlbYu6ZeT2tvQ0mBv0rO9W97byNh4ff8fFagBXki8yG1uMToc4P1kv5Irag0J3ZPy3x3XjAZykdwCtBdknrBN1JQYkTkj9L2P0qcM8nvqStdrD.Sx3qdmy9TbLsBItuUVdtOb61W65NanVvwp2VGqcacr9s0wMusN13153V2VG29i6H9OeXugZUeyOaHjSacTbSeKqijLXEX7pUxeCoTHObB
        

        933a64c8-2f50-4dbc-b150-ad42eb6dcbef-image.png

        Libre Wave - Freedom respecting instruments and effects
        My Patreon - HISE tutorials
        YouTube Channel - Public HISE tutorials

        ustkU 1 Reply Last reply Reply Quote 7
        • ustkU
          ustk @d.healey
          last edited by ustk

          @d-healey Dave's here 😎
          That'll for sure be very helpful!

          Can't help pressing F5 in the forum...

          1 Reply Last reply Reply Quote 2
          • First post
            Last post

          20

          Online

          1.7k

          Users

          11.9k

          Topics

          103.4k

          Posts