Color

Conversion helpers between common color spaces. All helpers operate on plain numeric tuples — RGB and HSL/HSV are returned as [a, b, c] arrays, hex values are strings prefixed with #.

Demo

Pick a color to see it routed through hexToRGB, rgbToHSL and rgbToHSV.

Preview

HEX

#0070f3

RGB

0, 112, 243

HSL

212, 100, 48

HSV

1, 1, 1

Code

<script
    setup
    lang="ts">
    import { computed, ref } from 'vue';
    import { hexToRGB, rgbToHSL, rgbToHSV } from '@basmilius/utils';

    const hex = ref('#0070f3');

    const rgb = computed(() => hexToRGB(hex.value));
    const hsl = computed(() => rgbToHSL(...rgb.value));
    const hsv = computed(() => rgbToHSV(...rgb.value));

    const round = (tuple: readonly number[]): string => tuple.map(value => Math.round(value)).join(', ');
</script>

<template>
    <div class="demo">
        <label class="picker">
            <input
                v-model="hex"
                type="color"/>
            <span class="swatch" :style="{ background: hex }"/>
        </label>

        <dl class="values">
            <div>
                <dt>HEX</dt>
                <dd>{{ hex }}</dd>
            </div>
            <div>
                <dt>RGB</dt>
                <dd>{{ round(rgb) }}</dd>
            </div>
            <div>
                <dt>HSL</dt>
                <dd>{{ round(hsl) }}</dd>
            </div>
            <div>
                <dt>HSV</dt>
                <dd>{{ round(hsv) }}</dd>
            </div>
        </dl>
    </div>
</template>

<style scoped>
    .demo {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;
        padding: 24px;
        border: 1px solid var(--vp-c-border);
        border-radius: 12px;
        background: var(--vp-c-bg-soft);
    }

    .picker {
        position: relative;
        display: inline-flex;
    }

    .picker input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .swatch {
        width: 96px;
        height: 96px;
        border-radius: 12px;
        border: 1px solid var(--vp-c-border);
    }

    .values {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px 24px;
        margin: 0;
        flex: 1;
    }

    .values div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .values dt {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--vp-c-text-2);
    }

    .values dd {
        margin: 0;
        font-family: var(--vp-font-family-mono);
        font-size: 0.95rem;
        color: var(--vp-c-text-1);
    }
</style>

Conversions

• hexToRGB — #rrggbb to [r, g, b].
• rgbToHEX — [r, g, b] to #rrggbb.
• rgbToHSL — [r, g, b] to [h, s, l].
• rgbToHSV — [r, g, b] to [h, s, v].
• hslToRGB — [h, s, l] to [r, g, b].
• hslToHSV — [h, s, l] to [h, s, v].
• hsvToRGB — [h, s, v] to [r, g, b].
• hsvToHSL — [h, s, v] to [h, s, l].

Internals

• hueToRGB — low-level helper used by hslToRGB for converting a hue component to its RGB value.

Conventions

• RGB components are integers in the range 0..255.
• Hue is in degrees 0..360 (or normalized 0..1 when used with hsvToRGB).
• Saturation and lightness/value are percentages 0..100 for HSL/HSV inputs as documented per function.
• Hex strings use the short #rrggbb form with a leading #.