{"id":537,"date":"2024-05-30T13:55:47","date_gmt":"2024-05-30T06:55:47","guid":{"rendered":"https:\/\/aksesia.com\/tools\/?p=537"},"modified":"2024-06-11T12:36:08","modified_gmt":"2024-06-11T05:36:08","slug":"color-hsl-calculator","status":"publish","type":"post","link":"https:\/\/aksesia.com\/tools\/color-hsl-calculator","title":{"rendered":"Color HSL Calculator: Lihat Kode Warna HSL"},"content":{"rendered":"\n<link rel=\"stylesheet\" href=\"https:\/\/aksesia.com\/wp-content\/themes\/moderntools\/assets\/css\/color-generator-hsl.css\" type=\"text\/css\">\n\n<div id=\"aksesia_tools\">\n<div class=\"aksesia-tools-top\">\n<\/div>\n<div class=\"kalkulator-hsl\">\n\n<div class=\"colors-contain\">\n\n<div class=\"color-output\">\n<input type=\"color\" class=\"print-color\" onchange=\"PrintColoring();\">\n<\/div>\n\n<div class=\"color-code\">\n<input type=\"text\" class=\"form-control RGB\" value=\"rgb(0, 1, 1)\" readonly \/>\n<input type=\"text\" class=\"form-control HEX\" value=\"#000101\" readonly \/>\n<input type=\"text\" class=\"form-control HSL\" value=\"hsl(0, 1%, 1%)\" readonly \/>\n<\/div>\n\n<\/div>\n<div class=\"colors-contain\">\n\n<div class=\"color-input\">\n<input type=\"number\" class=\"h_i form-control exmini\" min=\"0\" max=\"360\" value=\"0\" onchange=\"GenerateHUE()\" onKeyUp=\"if(this.value>360){this.value=360;}else if(this.value<0){this.value=0;}\" \/>\n<input type=\"number\" class=\"s_i form-control exmini\" min=\"0\" max=\"100\" value=\"1\" onchange=\"GenerateHUE()\" onKeyUp=\"if(this.value>100){this.value=100;}else if(this.value<0){this.value=0;}\"  \/>\n<input type=\"number\" class=\"l_i form-control exmini\" min=\"0\" max=\"100\" value=\"1\" onchange=\"GenerateHUE()\" onKeyUp=\"if(this.value>100){this.value=100;}else if(this.value<0){this.value=0;}\"  \/>\n<\/div>\n\n<div class=\"color-slider\">\n<input type=\"range\" class=\"Red Hue\" min=\"0\" max=\"360\" value=\"0\" onchange=\"GenerateHUESlider()\" \/>\n<input type=\"range\" class=\"Green Saturation\" min=\"0\" max=\"100\" value=\"1\" onchange=\"GenerateHUESlider()\" \/>\n<input type=\"range\" class=\"Blue Lightness\" min=\"0\" max=\"100\" value=\"1\" onchange=\"GenerateHUESlider()\" \/>\n<\/div>\n\n<\/div>\n<div class=\"colors-contain\">\n<div class=\"colors-palette\">\n<span class=\"reset-colors\" onclick=\"resetcolors()\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"30px\" height=\"30px\" viewBox=\"0 0 24 24\" fill=\"none\">\n<path d=\"M15.9775 8.71452L15.5355 8.2621C13.5829 6.26318 10.4171 6.26318 8.46447 8.2621C6.51184 10.261 6.51184 13.5019 8.46447 15.5008C10.4171 17.4997 13.5829 17.4997 15.5355 15.5008C16.671 14.3384 17.1462 12.7559 16.9611 11.242M15.9775 8.71452H13.3258M15.9775 8.71452V6\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n<path d=\"M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>\n<\/span>\n\n<span class=\"pin-colors\" onclick=\"pincolor()\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"30px\" height=\"30px\" viewBox=\"0 0 24 24\" fill=\"none\">\n<path d=\"M22 12C22 13.9778 21.4135 15.9112 20.3147 17.5557C19.2159 19.2002 17.6541 20.4819 15.8268 21.2388C13.9996 21.9957 11.9889 22.1937 10.0491 21.8079C8.10929 21.422 6.32746 20.4696 4.92893 19.0711C4.59299 18.7351 4.28279 18.3771 4 18M2.19215 13.9509C1.80629 12.0111 2.00433 10.0004 2.7612 8.17317C3.51808 6.3459 4.79981 4.78412 6.4443 3.6853C8.08879 2.58649 10.0222 2 12 2\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<path d=\"M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<path d=\"M14.5 2.31494C18.014 3.21939 20.7805 5.98588 21.685 9.4999\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>\n<\/span>\n<\/div>\n\n<div class=\"colors-list\">\n<div class=\"warna\" style=\"background:#f44336\"><\/div>\n<div class=\"warna\" style=\"background:#e91e63\"><\/div>\n<div class=\"warna\" style=\"background:#9c27b0\"><\/div>\n<div class=\"warna\" style=\"background:#3f51b5\"><\/div>\n<div class=\"warna\" style=\"background:#03a9f4\"><\/div>\n<div class=\"warna\" style=\"background:#009688\"><\/div>\n<div class=\"warna\" style=\"background:#4caf50\"><\/div>\n<div class=\"warna\" style=\"background:#cddc39\"><\/div>\n<div class=\"warna\" style=\"background:#ffc107\"><\/div>\n<div class=\"warna\" style=\"background:#ff5722\"><\/div>\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/div>\n\n<script src=\"https:\/\/aksesia.com\/wp-content\/themes\/moderntools\/assets\/js\/color-hsl-generator.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,41],"tags":[],"class_list":["post-537","post","type-post","status-publish","format-standard","hentry","category-palet-warna","category-generator"],"_links":{"self":[{"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/posts\/537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/comments?post=537"}],"version-history":[{"count":3,"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/posts\/537\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/posts\/537\/revisions\/540"}],"wp:attachment":[{"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/media?parent=537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/categories?post=537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aksesia.com\/tools\/wp-json\/wp\/v2\/tags?post=537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}