RHSL - Examples

Below are some examples of what you can customize in RHSL. If you need more information, please check the documentation.

NOTE: If you're using <script> tags, please note that this specific page will convert all single quotation marks inside them (ex. 'string') to double (ex. "string") before rendering them. This does not apply to empty script tags which use the src attribute.

Changing the color picker's size

<input value="#4C65AE" rhslcolor="size: 90, 75;">
<input value="#4C65AE" rhslcolor="size: 360, 200;">
<input value="#4C65AE" rhslcolor="padding: 10;">

Using different themes

<input value="#4CAEAE" rhslcolor="theme: dark;">
<input value="#4CAEAE" rhslcolor="theme: #374828, #525D38, #253518, #111711;">
<input value="#4CAEAE" rhslcolor="theme: ,;">

Positioning it differently

<input value="hsl(120, 50%, 50%)" rhslcolor="align: left;">
<input value="hsl(240, 50%, 50%)" rhslcolor="align: right;">
<input value="hsl(180, 50%, 50%)" rhslcolor="align: center;">

Using HSL_uv

<input value="rgb(0, 255, 255)" rhslcolor>

<input value="rgb(0, 255, 255)" rhslcolor="hsltype: luv;">

Using custom classes

<style>.customborder {border: 2px outset #777 !important;}</style>
<input value="#333" rhslcolor>

<input value="#333" rhslcolor="addclass: customborder;">

Displaying more options

<input value="#E6E6FA" rhslcolor>

<input value="#E6E6FA" rhslcolor="inputs: true;">

Using different color formats

<input value="#7DAE4C" rhslcolor="update-self: bg-color, hex;">
<input value="#7DAE4C" rhslcolor="update-self: bg-color, rgb;">
<input value="#7DAE4C" rhslcolor="update-self: bg-color, hsl;">

<input value="#AE4C4C" rhslcolor>
<input value="rgb(174, 76, 76)" rhslcolor>
<input value="hsl(0, 39%, 49%)" rhslcolor>

Changing how an element updates

<button value="#AEAE4C" rhslcolor="update-self: none, hex;">Sample text</button>
<button value="#AEAE4C" rhslcolor="update-self: bg-color, hex;">Sample text</button>
<button value="#AEAE4C" rhslcolor="update-self: bg-only, hex;">Sample text</button>
<button value="#AEAE4C" rhslcolor="update-self: text-color, hex;">Sample text</button>

<button value="#AEAE4C" rhslcolor="update-self: text, hex;"></button>
<button value="#AEAE4C" rhslcolor="update-self: bg-color+text, hex;"></button>
<button value="#AEAE4C" rhslcolor="update-self: bg-only+text, hex;"></button>
<button value="#AEAE4C" rhslcolor="update-self: text-color+text, hex;"></button>

Changing how an <input> element updates

<input value="#AEAE4C" rhslcolor="update-self: none, hex;">
<input value="#AEAE4C" rhslcolor="update-self: bg-color, hex;">
<input value="#AEAE4C" rhslcolor="update-self: bg-only, hex;">
<input value="#AEAE4C" rhslcolor="update-self: text-color, hex;">

NOTE: input elements will always have their text updated, so adding "+text" makes no difference.

NOTE: input elements will always have their text updated, so adding "+text" makes no difference.

Updating other elements

<div id="updateDiv">This is a div.</div>
<span id="updateSpan">This is a span.</span>

<input value="#AE7D4C" rhslcolor="update-self: text, hex; update-linked: (updateDiv bg-color hex);">
<button value="#AE4CAE" rhslcolor="update-self: bg-color, hex; update-linked: (updateSpan text hex);"></button>

This is a div.

This is a span.

Using onchange and oninput

<script>function updateColor(color) {document.getElementById("updateElement").style.background = color;}</script>
onchange: <input value="#49B" onchange="updateColor(this.value);" rhslcolor>
oninput: <input value="#990" oninput="updateColor(this.value);" rhslcolor>

<div id="updateElement" style="height: 50px; width: 50px;"></div>

onchange:
oninput:

Using it on forms

<form action="https://www.w3schools.com/action_page.php">
<input name="color1" value="#654CAE" rhslcolor="update-self: bg-color, hex;"> (color1)
<input name="color2" type="hidden" id="hiddenInput" autocomplete="off">
<button type="button" value="#654CAE" rhslcolor="update-self: bg-color, rgb; update-linked: (hiddenInput bg-color+text rgb);">Pick a color</button> (color2)

<button>Submit</button>
</form>