Color Palettes in Bulma
Color Palettes in Bulma (Bulma의 색상 팔레트)
Bulma는 7가지 기본 색상을 제공하고, 각 색상마다 CSS 변수 모음을 자동으로 생성해요. 이 변수 집합들이 색상 팔레트 역할을 해서, 같은 색의 다양한 음영(shade)을 쉽게 사용할 수 있어요.
출처: 문서
본문
Bulma는 7가지 기본 색상을 제공해요.
textlinkprimaryinfosuccesswarningdanger
Bulma는 이 각각의 색상에 대해 CSS 변수 모음을 자동으로 생성해요. 이 변수 집합들은 하나의 색상 팔레트처럼 동작해서, 같은 색의 다양한 음영을 가지고 놀 수 있게 해 줘요.
예를 들어 primary 색상을 $primary: hsl(171, 100%, 41%)로 설정하면, Bulma는 다음 CSS 변수들을 생성해요.
--bulma-primary--bulma-primary-rgb— 직접 RGBA 음영을 만들고 싶을 때:rgba(var(--bulma-primary-rgb), 0.5)--bulma-primary-h— primary 색상의 색조(hue)와 같음--bulma-primary-s— primary 색상의 채도(saturation)와 같음--bulma-primary-l— primary 색상의 명도(lightness)와 같음--bulma-primary-base— (--bulma-primary와 같음)--bulma-primary-invert— primary 색상 위에서 잘 보이는 색(전경/배경 조합)--bulma-primary-light— 명도90%의 primary 색상--bulma-primary-light-invert—-light버전 위에서 잘 보이는 색--bulma-primary-dark— 명도20%의 primary 색상--bulma-primary-dark-invert—-dark버전 위에서 잘 보이는 색--bulma-primary-soft— 같은 색조의 밝은(light) 색상--bulma-primary-soft-invert—-soft버전 위에서 잘 보이는 색--bulma-primary-bold— 같은 색조의 진한(bold) 색상--bulma-primary-bold-invert—-bold버전 위에서 잘 보이는 색
퍼센트 팔레트
각 기본 색상에 대해 Bulma는 15%에서 95%까지의 투명도(또는 음영) 팔레트도 생성해요.
--bulma-primary-15--bulma-primary-25--bulma-primary-35--bulma-primary-45--bulma-primary-55--bulma-primary-65--bulma-primary-75--bulma-primary-85--bulma-primary-95
이 퍼센트 값들은 색조(색상 자체)를 유지하면서 흰색이나 검은색과 섞어서 다양한 명도의 음영을 만들어요. 이렇게 생성된 팔레트 덕분에, 버튼이나 배경 같은 요소에 같은 색조의 다양한 음영을 적용하기 쉬워요.
다른 기본 색상에 대해서도 같은 규칙
위의 모든 변수 규칙은 link, info, success, warning, danger와 같은 나머지 6가지 기본 색상에도 똑같이 적용돼요. 즉 --bulma-info-light, --bulma-danger-dark, --bulma-link-soft처럼 각 색상마다 동일한 구조의 변수를 사용할 수 있어요.