HSL에서 RGB 값


17

RGB (Red Green Blue) 색상 모델의 주요 목적은 텔레비전 및 컴퓨터와 같은 전자 시스템에서 이미지를 감지, 표현 및 표시하는 것입니다.

HSL (Hue Saturation Lightness)은 1970 년대 컴퓨터 그래픽 연구자들이 인간의 비전이 색상 특성을 인식하는 방식과 더 밀접하게 일치하도록 설계 한 대체 색상 모델입니다.

다음은 RGBHSL에 대한 위키 기사입니다 . 그래픽 프로그램이 HSL에서 계산을 수행하고 나중에 대부분의 화면에서 선호하는 형식으로 변환하는 것이 일반적입니다 : RGB.

작업은 HSL을 입력으로 사용하여 RGB를 출력하는 기능 / 프로그램을 작성하는 것입니다.

I / O가 일관된 한 선호하는 I / O 표현을 선택할 수 있습니다.

예를 들어, 3 개 개의 요소가 어레이 / 튜플 또는 명명 된 3 개 속성 객체 일 수있다 h, s그리고 l있지만, I는 정수 (손실 정밀도)로 고속 링크를 수신하고, RGB의 정수를 출력하는 등의 다른 재치 변형 허용 것이다.

입력은 범위와 형식이 안전하다고 가정 할 수 있으며 둘 다 결정할 수 있습니다. 나는 범위 0-1 0-1 0-1또는 0-360 0-100 0-100hsl 0-1 0-1 0-1또는 0-255 0-255 0-255rgb를 강력히 제안합니다 .

각 답변은 위의 두 가지를 모두 지정해야하며, 다른 변형보다 문자가 적더라도 특별히 자랑 스러우면 다양한 변형을 입력하십시오. 가장 작은 것을 위에 놓으십시오.

의사 테스트 사례 0-360 0-100 0-1000-255 0-255 0-255

h   s   l   → r   g   b

0   0   0   → 0   0   0
90  56  17  → 43  68  19
202 19  39  → 81  104 118
72  55  26  → 88  103 30

변환 공식은 다음에서 찾을 수 있습니다 .

이것은 변환을 시각화하는 좋은 방법입니다.


에 대한 귀하의 제안 범위 H의가 0-360있다 [0,360), 그것은 더 나은로 기록 될 것입니다 0-359?
Jonathan Allan

3
@JonathanAllan 395.1이 가능한 입력이 아니라는 것을 암시하는 것처럼 조금 더 혼란스러워 보일 수 있습니다. a-b정수가 아닌 값을 처리 할 때 표기법을 사용하는 것이 그 자체로 잘못된 것이지만 질문을 더 읽기 쉽게 유지하는 것이 좋습니다. 다른 사람이 불평을하면, 그 밖을 가리키는 주셔서 감사합니다, 그래서 그것을 다시 생각합니다
towc

그래, 359.1 포인트에 동의-아마 그냥 [0,360)다음 의 표준 표기법을 사용하십시오 :)
Jonathan Allan

glsl 답변이 없다는 것에 놀랐습니다.)
towc

답변:


8

자바 스크립트 (ES6), 98 95 94 바이트

H 를 받아 0,360 [)S / L[0,1) . [0,1) 에서 3 개의 부동 소수점 배열로 R , GB 를 출력 합니다.

(H,S,L)=>[5,3,1].map(i=>A(L*2)*S*([1,Y,0,0,Y,1][(i-~H)%6]-.5)+L,Y=(A=n=>n>1?2-n:n)((H/=60)%2))

테스트 사례

이 스 니펫은 결과를 다시 [0,255] 로 변환합니다 .

어떻게?

초기화 코드

Y = (                  // we compute Y = 1 - |(H/60) mod 2 - 1| = X / C
  A = n =>             // A = function that returns 1 - |n - 1|
    n > 1 ?            //   first compare n with 1
      2 - n            //     which allows to simplify the formula to either 2 - n
    :                  //   or
      n                //     just n
)((H /= 60) % 2)       // divide H by 60 and compute Y = A(H % 2)

메인 코드

[5, 3, 1].map(i =>     // for each i in (5, 3, 1):
  A(L * 2) * S * (     //   compute (1 - |2L - 1|) * S (this is C), and multiply it by:
    [1, Y, 0, 0, Y, 1] //     either 0, 1 or Y (let's call this factor K), picked from
    [(i - ~H) % 6]     //     a cyclic sequence of period 6, using i and ~H (-6 ≤ ~H ≤ -1)
    - .5               //     minus 1/2
  )                    //   this gives: C(K - 1/2) = CK - C/2, where CK = 0, C or X
  + L                  //   we add L, leading to CK - C/2 + L = CK + m
)                      // end of map() --> returns [R, G, B]

(0, C, X)의 순열

약간 까다로운 부분은 색조 성분의 각도에 따라 (0, C, X) 의 올바른 순열을 생성하는 것 입니다. 다음 그림에서 볼 수 있듯이 각 열 값은 서로 다른 오프셋에서 시작하여 주기 6 의 동일한 사이클 시퀀스에서 선택됩니다 . 위 코드에서 H 를 정수 로 강제 변환해야하기 때문에 + H 대신 -~ H를 사용 합니다. 따라서 오프셋 (0,4,2) 대신 (5,3,1) 입니다.

                       C,X,0,0,X,C,C,X,0,0,X,C, ...
 +------> C,X,0,0,X,C  <--------->                  offset = 0, (0 - 1) mod 6 = 5
 | +----> X,C,C,X,0,0          <--------->          offset = 4, (4 - 1) mod 6 = 3
 | | +--> 0,0,X,C,C,X      <--------->              offset = 2, (2 - 1) mod 6 = 1
 | | |
(C,X,0) for   0 ≤ H <  60
(X,C,0) for  60 ≤ H < 120
(0,C,X) for 120 ≤ H < 180
(0,X,C) for 180 ≤ H < 240
(X,0,C) for 240 ≤ H < 300
(C,0,X) for 300 ≤ H < 360

겠습니까 복용 H[0,6)와에 출력 [0,1]일부 바이트 저장 하시겠습니까?
Jonathan Allan

@JonathanAllan Ah, I / O 형식이 느슨하다는 것을 알지 못했습니다. 감사!
Arnauld

4

Mathematica, 155 바이트

(x~Clear~c;d=Piecewise@Table[{(P=Permutations)[P@{c,x,0}][[42,i]],(i-1)<=#<i*p},{i,6}];c=(1-Abs[2#3-1])#2;x=c(1-Abs[Mod[#/(p=60),2]-1]);m=#3-c/2;(m+d)255)&


온라인으로 사용해보십시오!



1
@totallyhuman 나는 그것이 HueHSL이 아닌 HSB (AKA HSV) 처럼 옳다고 생각하지 않습니다 (링크 된 Wikipedia 페이지의 그림 2a 및 2b 참조).
Jonathan Allan

1
Jenny-그것이 옳다면 아래에 내장되지 않은 바이트 수로 게시하지 않을 이유가 없습니다!
Jonathan Allan

1
@JonathanAllan 아, 그래요. 그것이 RGBColor존재하지만 존재 HSLColor하지 않는 방법을 약간 성가시다 . > _>
완전히 인간적인

이것의 ungolfed 버전이 있습니까?
user76284

4

파이썬 2 , 32 바이트

from colorsys import*;hls_to_rgb

온라인으로 사용해보십시오!

이 기능은 실제로 hls_to_rgb내부를 통해 파이썬에 내장되어 있습니다 .colorsys 라이브러리 있습니다. 광산 입력 형식은 0-1 범위의 HLS입니다. 그리고 광산은 0에서 1 범위의 튜플에서 RGB 값을 출력합니다.

크레딧

가져 오기만하면됩니다 (그리고 바이트 수를 줄이는 데 도움이 됨) Jonathan Allan에게 감사합니다.


from colorsys import hls_to_rgb재사용 할 수있는 기능을 제공하는 것보다 31 바이트 만 가능하다고 생각합니다 . 편집-21로 from colorsys import*만듭니다.
Jonathan Allan

1
@JonathanAllan 감사합니다.
Neil

실제로 아마 import colorsys15에 대한 것 !
Jonathan Allan

@JonathanAllan Nice, 다시 업데이트되었습니다.
Neil

1
/ :이, 나는이 너무 많이 조금 codegolfing의 정신에 영향을 생각할 수 있습니다 그러나 진실
towc

4

C ++, 228221 바이트

Zacharý 덕분에 -7 바이트

#define S(o,n)r[t[int(h[0])/60*3+o]+o-2]=(n+h[2]-c/2)*255;
void C(float*h,int*r){float g=2*h[2]-1,c=(g<0?1+g:1-g)*h[1],a=int(h[0])%120/60.f-1;int t[]={2,2,2,3,1,2,3,3,0,4,2,0,4,1,1,2,3,1};S(0,c)S(1,c*(a<0?1+a:1-a))S(2,0)}

인수 3 개 요소의 최소 크기가 두 배열 (즉 float hsl[3]int rgb[3]

괜찮아. 이제 어떻게 작동합니까? 그 긴 배열은 무엇입니까?

글쎄, 그것은 긴 배열이 아니며 int배열입니다. 농담을 제외하고, 배열은 올바른 순열 + 2를 선택하고자 할 때 CX와 0을 오른쪽으로 얼마나 많은 위치로 시프트하는지 나타냅니다. R ', G'및 B '가 어떻게 선택되었는지 기억하십니까?

R ', G'및 B '선택 방법

{C, X, 0} 인 "정상"순서가 있다고 가정 해 봅시다.

이제 첫 번째 순열 (예 : {C, X, 0})을 선택하면 오른쪽으로 0만큼 이동하는 것과 정확히 같은 이동이 필요하지 않습니다. 따라서 배열의 처음 3 개 요소는 0,0 및 0

두 번째 순열 ({X, C, 0})의 경우 C를 1만큼 오른쪽으로 시프트하고 X를 -1만큼 왼쪽으로 시프트해야하므로 배열의 네 번째, 다섯 번째 및 여섯 번째 요소는 1, -1 및 0입니다.

등등...

3 번째와 4 번째 순열의 경우 0을 2만큼 왼쪽으로 시프트해야하므로 오른쪽으로 -2를 시프트해야합니다. 음수가 2보다 많으므로 배열의 각 요소에 2를 더하고 런타임에 2를 빼십시오 (골프 목적으로 인해 배열에 정수 만 있음).


221 바이트 : pastebin.com/C8WaSSpb
Zacharý


3

HTML + 자바 스크립트 (ES6), 8 + 88 = 96 바이트

f=
(h,s,l)=>(p.style.color=`hsl(${h},${s}%,${l}%)`,getComputedStyle(p).color.match(/\d+/g))
<div oninput=o.textContent=f(h.value,s.value,l.value)>H: <input type=number min=0 max=360 value=0 id=h>°<br>S: <input type=number min=0 max=100 value=0 id=s>%<br>L: <input type=number min=0 max=100 value=0 id=l>%<pre id=o>0,0,0</pre>
<p id=p>

각도와 두 퍼센트로 입력을받습니다. HTML 스 니펫 <p id=p>과 JavaScript 화살표 기능을 스코어링하고 있습니다. 반올림 브라우저가 무엇을 사용하는지 모르므로 답변이 약간 다를 수 있습니다.


2

스위프트 4, 218 바이트

[0,1] 범위의 HSL 값을 인수로 받아들이고 같은 범위의 RGB 값을 포함하는 배열을 반환합니다.

import Cocoa;typealias F=CGFloat;func f(h:F,s:F,l:F)->[F]{var r=F(),g=F(),b=F(),x=s*min(1-l,l),n=2*x/max(l+x,1e-9);NSColor(hue:h,saturation:n,brightness:l+x,alpha:1).getRed(&r,green:&g,blue:&b,alpha:nil);return[r,g,b]}

아이디어는 먼저 입력을 HSL에서 HSB로 변환 한 다음 Cocoa의 내장 색상 오브젝트의 HSB 생성자를 사용하여 RGB 값을 검색하는 것입니다.

UIKit 버전은 다음과 같은 유일한 대체품과 동일한 길이입니다.

  • CocoaUIKit
  • NSColorUIColor

언 골프 드 :

#if os(iOS)
    import UIKit
    typealias Color = UIColor
#elseif os(OSX)
    import Cocoa
    typealias Color = NSColor
#endif

typealias F = CGFloat

func f(h: F,s: F,l: F) -> [F] {
    var r = F(), g = F(), b = F()

    let x = s * min(1 - l, l)
    let n = 2 * x / max(l + x, 1e-9)

    let color = Color(hue: h, saturation: n, brightness: l + x, alpha: 1)
    color.getRed(&r, green: &g,blue: &b, alpha: nil)

    return [r, g, b]
}

다음 코드는 단지의 값을 대체하여, 테스트에 사용할 수 있습니다 h, s그리고 l:

let h: CGFloat = 0
let s: CGFloat = 0
let l: CGFloat = 0

let result = f(h: h/360, s: s/100, l: l/100).map { Int(round($0*255)) }
print(result)

불행히도 모든 샌드 박스는 Cocoa를 포함하지 않는 Linux에서 실행되기 때문에 온라인 샌드 박스에 대한 링크를 제공 할 수 없습니다.


2

GLSL (GL_ES) 160144134 131 바이트

색조는 0-6 범위에 있습니다 (3 바이트 절약)
토, 라이트 및 RGB는 0-1입니다.

vec3 f(vec3 c){return mix(c.bbb,mix(clamp(vec3(-1,2,2)-abs(c.r-vec3(3,2,4))*vec3(-1,1,1),0.,1.),vec3(c.b>.5),abs(.5-c.b)*2.),c.g);}

쉐이더 책에 사용해보십시오


202 19 39 → 81104118 의 작은 오류를 제외하고 는 인쇄 화면에서 색상 선택 도구를 사용하여 정확한 출력을 테스트했습니다. 80104118


1

R , 88 바이트

function(h,s,l){v=(2*l+s*(1-abs(2*l-1)))/2;col2rgb(hsv(h,ifelse(v==0,v,(2*(v-l))/v),v))}

온라인으로 사용해보십시오!

이 기능은 H, S 및 L 값을 0-1 범위 값으로 입력하고 RGB 값을 0-255 범위 값으로 출력합니다. HSL 표현을 HSV 표현 hsv()으로 변환 한 다음 HSV 표현을 R 색상으로 변환하는 데 사용 합니다 (예 : 16 진 표현-#rrggbb). 그런 다음 col2rgb()R 색상을 RGB 값으로 변환하는 데 사용 합니다.


1

젤리 ,  39  32 바이트

덕분에 -1 caird coinheringaahing ( %2단지 )
-1 및 / 또는 caird coinheringaahing 덕분에 -4에 대한 영감 !

Ḥ;Ḃ’ACש"⁵×\;0+³_®H¤⁴Ḟị336Œ?¤¤œ?

세 가지 명령 줄 인수를 취하는 전체 프로그램 :

  • L, H , S범위에서 [0,1), [0,6)그리고 [0,1)각각

RGB 형식을 제공하는 목록을 인쇄합니다.

  • [R, G, B] 범위 내의 세 값 각각 [0,1]

노트 : H 포장과 마찬가지로 포장 할 수도 있습니다 [0,360).

온라인으로 사용해보십시오!

어떻게?

Ḥ;Ḃ’ACש"⁵×\;0+³_®H¤⁴Ḟị336Œ?¤¤œ? - Main link: number, L (in [0,1]); number, H (in [0,6))
Ḥ                                - double                 =     2L
  Ḃ                              - modulo by 2            =              H%2
 ;                               - concatenate            = [   2L   ,   H%2]

   ’                             - decrement              = [   2L-1 ,   H%2-1]
    A                            - absolute               = [  |2L-1|,  |H%2-1|]
     C                           - complement             = [1-|2L-1|,1-|H%2-1|]
                                 -                        = [C/S     ,C/X]
         ⁵                       - 3rd program argument   = S  (in [0,1])
        "                        - zip with:
      ×                          -   multiplication       = [C,C/X]
       ©                         -   (copy the result, C, to the register)
           \                     - cumulative reduce with:
          ×                      -   multiplication       = [C, C/X*C] = [C,X]
            ;0                   - concatenate zero       = [C,X,0]
               ³                 - 1st program argument   = L
              +                  - add (vectorises)       = [C+L,X+L,L]
                   ¤             - nilad followed by link(s) as a nilad:
                 ®               -   recall from register = C
                  H              -   halve                = C/2
                _                - subtract               = [C+L-C/2,X+L-C/2,L-C/2]
                             ¤   - nilad followed by link(s) as a nilad:
                    ⁴            -   2nd program argument = H
                     Ḟ           -   floor                = floor(H)
                            ¤    -   nilad followed by link(s) as a nilad:
                       336       -     literal 336
                          Œ?     -     Shortest permutation of natural numbers with a
                                 -     lexicographical index of 336 in all permutations
                                 -     thereof            = [3,5,6,4,2,1]
                      ị          -   index into (1-indexed & modular)
                              œ? - get that permutation of [C+L-C/2,X+L-C/2,L-C/2]
                                 - implicit print

물론 이죠 감사!
Jonathan Allan
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.