Color helpers

Color helpers (색상 헬퍼)

텍스트 색상과 배경 색상을 Bulma의 내장 팔레트로 쉽게 지정할 수 있는 헬퍼 클래스들이에요. 10가지 기본 색과 9가지 회색 계열, 그리고 각 색의 라이트·다크 변형을 제공해요.

출처: 문서

본문

텍스트 색상 (Text color)

어떤 요소라도 10가지 색상 또는 9가지 회색 계열 중 하나로 설정할 수 있어요:

클래스 색상 예시
has-text-white hsl(0, 0%, 100%) Hello Bulma
has-text-black hsl(0, 0%, 4%) Hello Bulma
has-text-light hsl(0, 0%, 96%) Hello Bulma
has-text-dark hsl(0, 0%, 21%) Hello Bulma
has-text-primary hsl(171, 100%, 41%) Hello Bulma
has-text-link hsl(217, 71%, 53%) Hello Bulma
has-text-info hsl(204, 86%, 53%) Hello Bulma
has-text-success hsl(141, 71%, 48%) Hello Bulma
has-text-warning hsl(48, 100%, 67%) Hello Bulma
has-text-danger hsl(348, 100%, 61%) Hello Bulma
클래스 회색 계열 예시
has-text-black-bis hsl(0, 0%, 7%) Hello Bulma
has-text-black-ter hsl(0, 0%, 14%) Hello Bulma
has-text-grey-darker hsl(0, 0%, 21%) Hello Bulma
has-text-grey-dark hsl(0, 0%, 29%) Hello Bulma
has-text-grey hsl(0, 0%, 48%) Hello Bulma
has-text-grey-light hsl(0, 0%, 71%) Hello Bulma
has-text-grey-lighter hsl(0, 0%, 86%) Hello Bulma
has-text-white-ter hsl(0, 0%, 96%) Hello Bulma
has-text-white-bis hsl(0, 0%, 98%) Hello Bulma

각 색상은 라이트 버전과 다크 버전으로도 사용할 수 있어요. *-light 또는 *-dark를 붙이면 돼요.

클래스 라이트/다크 색상 예시
has-text-primary-light hsl(171, 100%, 96%) Hello Bulma
has-text-link-light hsl(219, 70%, 96%) Hello Bulma
has-text-info-light hsl(206, 70%, 96%) Hello Bulma
has-text-success-light hsl(142, 52%, 96%) Hello Bulma
has-text-warning-light hsl(48, 100%, 96%) Hello Bulma
has-text-danger-light hsl(347, 90%, 96%) Hello Bulma
has-text-primary-dark hsl(171, 100%, 29%) Hello Bulma
has-text-link-dark hsl(217, 71%, 45%) Hello Bulma
has-text-info-dark hsl(204, 71%, 39%) Hello Bulma
has-text-success-dark hsl(141, 53%, 31%) Hello Bulma
has-text-warning-dark hsl(48, 100%, 29%) Hello Bulma
has-text-danger-dark hsl(348, 86%, 43%) Hello Bulma

색상을 상속받거나 현재 색상을 사용할 수도 있어요:

클래스 값 예시
has-text-current currentColor Hello Bulma
has-text-inherit inherit Hello Bulma

배경 색상 (Background color)

어떤 요소라도 10가지 색상 또는 9가지 회색 계열 중 하나로 설정할 수 있어요:

클래스 배경 색상
has-background-white hsl(0, 0%, 100%)
has-background-black hsl(0, 0%, 4%)
has-background-light hsl(0, 0%, 96%)
has-background-dark hsl(0, 0%, 21%)
has-background-primary hsl(171, 100%, 41%)
has-background-link hsl(217, 71%, 53%)
has-background-info hsl(204, 86%, 53%)
has-background-success hsl(141, 71%, 48%)
has-background-warning hsl(48, 100%, 67%)
has-background-danger hsl(348, 100%, 61%)
클래스 배경 회색 계열
has-background-black-bis hsl(0, 0%, 7%)
has-background-black-ter hsl(0, 0%, 14%)
has-background-grey-darker hsl(0, 0%, 21%)
has-background-grey-dark hsl(0, 0%, 29%)
has-background-grey hsl(0, 0%, 48%)
has-background-grey-light hsl(0, 0%, 71%)
has-background-grey-lighter hsl(0, 0%, 86%)
has-background-white-ter hsl(0, 0%, 96%)
has-background-white-bis hsl(0, 0%, 98%)

각 색상은 라이트 버전과 다크 버전으로도 사용할 수 있어요. *-light 또는 *-dark를 붙이면 돼요.

클래스 라이트/다크 배경 예시
has-background-primary-light hsl(171, 100%, 96%) Hello Bulma
has-background-link-light hsl(219, 70%, 96%) Hello Bulma
has-background-info-light hsl(206, 70%, 96%) Hello Bulma
has-background-success-light hsl(142, 52%, 96%) Hello Bulma
has-background-warning-light hsl(48, 100%, 96%) Hello Bulma
has-background-danger-light hsl(347, 90%, 96%) Hello Bulma
has-background-primary-dark hsl(171, 100%, 29%) Hello Bulma
has-background-link-dark hsl(217, 71%, 45%) Hello Bulma
has-background-info-dark hsl(204, 71%, 39%) Hello Bulma
has-background-success-dark hsl(141, 53%, 31%) Hello Bulma
has-background-warning-dark hsl(48, 100%, 29%) Hello Bulma
has-background-danger-dark hsl(348, 86%, 43%) Hello Bulma

배경 색상을 상속받거나 현재 색상을 배경으로 사용할 수도 있어요:

클래스 값 예시
has-background-current currentColor Hello Bulma
has-background-inherit inherit Hello Bulma

더 알아보기 (Learn more)