색상 코드 완벽 가이드: HEX, RGB, HSL의 차이와 활용

function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `rgb(${r}, ${g}, ${b})`;
}

hexToRgb('#FF5733'); // "rgb(255, 87, 51)"

function rgbToHex(r, g, b) {
    return '#' + [r, g, b]
        .map(x => x.toString(16).padStart(2, '0'))
        .join('').toUpperCase();
}

rgbToHex(255, 87, 51); // "#FF5733"

function rgbToHsl(r, g, b) {
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    if (max === min) {
        h = s = 0; // achromatic
    } else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

        switch (max) {
            case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
            case g: h = ((b - r) / d + 2) / 6; break;
            case b: h = ((r - g) / d + 4) / 6; break;
        }
    }

    return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
}

rgbToHsl(255, 87, 51); // "hsl(9, 100%, 60%)"

:root {
    /* HSL로 기본 색상 정의 */
    --primary-h: 9;
    --primary-s: 100%;
    --primary-l: 60%;

    /* 변형 색상 자동 생성 */
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-light: hsl(var(--primary-h), var(--primary-s), 80%);
    --primary-dark: hsl(var(--primary-h), var(--primary-s), 40%);
}

/* 다크 모드 */
[data-theme="dark"] {
    --primary-l: 70%; /* 밝기만 조절 */
}

/* 사용 */
.button {
    background: var(--primary);
}

.button:hover {
    background: var(--primary-dark);
}

/* 기본 색만 정의하면 나머지 자동 생성 */
:root {
    --brand-color: 220; /* 파란색 */
}

.primary { color: hsl(var(--brand-color), 70%, 50%); }
.secondary { color: hsl(calc(var(--brand-color) + 30), 70%, 50%); }
.tertiary { color: hsl(calc(var(--brand-color) + 60), 70%, 50%); }

:root {
    --text-color: hsl(0, 0%, 20%);
    --bg-color: hsl(0, 0%, 98%);
}

/* 다크 모드: 밝기만 반전 */
[data-theme="dark"] {
    --text-color: hsl(0, 0%, 95%);
    --bg-color: hsl(0, 0%, 10%);
}