728x90

컬러 변환 및 단계 표시 (Color Conversion and Step Display)


 
Hex: #ff0000
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 1.00)
HSL: hsl(0, 100%, 50%)
HWB: hwb(0, 0%, 0%)
CMYK: cmyk(0%, 100%, 100%, 0%)
LAB: lab(53.2, 80.092, 67.203)
OKLCH: oklch(62.8% 0.258 29.234)
OKLCH (Decimal): oklch(0.628 0.258 29.234)
100%
#ffffff  / rgba(255, 255, 255, 1.00)
95%
#ffe5e5  / rgba(255, 229, 229, 1.00)
90%
#ffcccc  / rgba(255, 204, 204, 1.00)
85%
#ffb3b3  / rgba(255, 179, 179, 1.00)
80%
#ff9999  / rgba(255, 153, 153, 1.00)
75%
#ff8080  / rgba(255, 128, 128, 1.00)
70%
#ff6666  / rgba(255, 102, 102, 1.00)
65%
#ff4d4d  / rgba(255, 77, 77, 1.00)
60%
#ff3333  / rgba(255, 51, 51, 1.00)
55%
#ff1a1a  / rgba(255, 26, 26, 1.00)
50%
#ff0000  / rgba(255, 0, 0, 1.00)
45%
#e60000  / rgba(230, 0, 0, 1.00)
40%
#cc0000  / rgba(204, 0, 0, 1.00)
35%
#b30000  / rgba(179, 0, 0, 1.00)
30%
#990000  / rgba(153, 0, 0, 1.00)
25%
#800000  / rgba(128, 0, 0, 1.00)
20%
#660000  / rgba(102, 0, 0, 1.00)
15%
#4d0000  / rgba(77, 0, 0, 1.00)
10%
#330000  / rgba(51, 0, 0, 1.00)
5%
#1a0000  / rgba(26, 0, 0, 1.00)
0%
#000000  / rgba(0, 0, 0, 1.00)

※ 참고  chroma.hsl(h, s, l)을 사용하여 새로운 색상을 만들고 있는데, 이 과정에서 alpha 정보가 사라짐. color.js를 사용해봐도 쉽지 않음. 굳이 않되는 것 하지 않고 그냥 사용 하기로 했습니다. 양해 바랍니다.
※ hwb, cmyk, lab은 입력 지원은 하나 권장하지 않음. (수정은 하였지만 데스트 많이 해보질 않음)

 

수정 - 2025-02-29:

  • hwb, cmyk는 Chroma.js에서 변환하지 않아 CMYK → RGB → CMYK로 변환 근사값으로 변환 되어 값이 원본과 달라지는 현상이 발생. lab는 근사값으로 바로 작동되지만 역시 원본과 달라지는 현상 있음. 작동은 하나 달라지는 것은 코드 힘듬. ( color-convert, culori 등)를 써도 동일하거나 유사한 현상이 발생.
    ✅ hwb(190, 50%, 30%) 입력 → 변환 정상 작동(작동 O)
    ✅ cmyk(0%, 90%, 90%, 0%) 입력 → 변환 정상 작동(작동 O)
    ✅ lab(55.2, 81.092, 67.310) 입력 → 변환 정상 작동(작동 O)

 

수정 - 2025-02-28:

  • OKLCH 변환 과정에서 Hue 값이 NaN으로 설정됨 - 수정 기본값을 0으로 설정
  • input이 #ffffff(흰색) 일 때 Chroma(C) 값이 0이 되면서 Hue 값이 NaN이 되는 경우가 있음. - 수정
  • 3자리 HEX (#RGB) → 6자리 HEX (#RRGGBB) 자동 변환 - 그 외 자리 오류문구 표시 및 작동 X
    ✅ #fff → #ffffff, #abc → #aabbcc 변환 지원
  • 8자리 HEX 코드 (#RRGGBBAA) 처리 추가
    ✅ #312f6080 → 알파(A) 값도 포함
  • 기타부분 입력 테스트함
    ✅ hwb(190, 50%, 30%) 입력 → 변환 정상 작동
    ✅ cmyk(0%, 90%, 90%, 0%) 입력 → 변환 정상 작동
    ✅ lab(55.2, 81.092, 67.310) 입력 → 변환 정상 작동
    ✅ oklch(0.884 0.0053 248.11) 입력 → 변환 정상 작동
    ✅ rgb(255, 0, 0) 입력 → 변환 정상 작동
    ✅ hsl(120, 100%, 50%) 입력 → 변환 정상 작동
    ✅ #fff 입력 → #ffffff로 변환
  • lab(55.2, 81.092, 67.310) 입력 시 다른 값이 출력됨
    ✅ chroma.lab()이 D65 표준을 사용하기 때문 → 변환 값의 차이 발생 (이 문제는 보통 허용되는 수준)


수정 - 2025-02-26:

  • 입력을 '%'만 입력되는것을 .XXX도 입력되게 하였습니다. oklch(63.3% 0.209 29.733)와 oklch(0.633 0.209 29.733) 이런 식으로 둘 다 입력됩니다.
  • 출력 부분도 OKLCH: oklch(63.3% 0.209 29.733) OKLCH (Decimal): oklch(0.633 0.209 29.733) 추가하였습니다.
  • 입력란에 값을 입력후 '엔터'를 사용하도록 수정

 

 

728x90

관련된 다른 글

Document/Memory