下载

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Password.link

调色盘

根据指定的颜色智能推荐相应的配色

Bulma推荐以下7种基础配色:

text
link
primary
info
success
warning
danger

这些配色已经自动匹配了不同的灰度作为系列，供直接选用：

例如，$primary: hsl(171, 100%, 41%)的灰度系列：

  • --bulma-primary
  • --bulma-primary-rgb RGBA模式: rgba(var(--bulma-primary-rgb), 0.5)
  • --bulma-primary-h 色相 hue
  • --bulma-primary-s 饱和度 saturation
  • --bulma-primary-l 明度 lightness
  • --bulma-primary-base 基础色(等同于 --bulma-primary)
  • --bulma-primary-invert 基础色的反转色 (前景色和背景色的组合)
  • --bulma-primary-light 等同于基础色的90% 明度
  • --bulma-primary-light-invert 对应的反转色 -light 版本
  • --bulma-primary-dark 等同于基础设施 20% 明度
  • --bulma-primary-dark-invert 对应的反转色 -dark 版本
  • --bulma-primary-soft 浅色模式下的 light 对应色；深色模式下的 dark 对应色
  • --bulma-primary-bold 浅色模式下的 dark 对应色；深色模式下的 light 对应色
  • --bulma-primary-soft-invert bold 版本的反转色
  • --bulma-primary-bold-invert soft 版本的反转色
  • --bulma-primary-on-scheme 页面背景色 scheme-main (默认为白色)

实际颜色效果如下:

--bulma-primary The quick brown fox jumps over the lazy dog
--bulma-primary-invert The quick brown fox jumps over the lazy dog
--bulma-primary-light The quick brown fox jumps over the lazy dog
--bulma-primary-light-invert The quick brown fox jumps over the lazy dog
--bulma-primary-dark The quick brown fox jumps over the lazy dog
--bulma-primary-dark-invert The quick brown fox jumps over the lazy dog
--bulma-primary-soft The quick brown fox jumps over the lazy dog
--bulma-primary-bold The quick brown fox jumps over the lazy dog
--bulma-primary-on-scheme The quick brown fox jumps over the lazy dog

Soft and Bold colors

由于深色模式的存在，就产生了一个新概念：soft and bold的自动配色。

soft颜色有着跟背景色更大的反差, 更加柔和; 在浅色模式下, 是更加浅的颜色, 是背景色是理想的搭配：

--bulma-primary-soft as background The quick brown fox jumps over the lazy dog

另一方面, bold颜色在背景上也有着更大的反差; 是更深的颜色。

在浅色模式下, 这意味着bold颜色更深, 是文本颜色text colors的理想搭配:

--bulma-primary-bold as text color The quick brown fox jumps over the lazy dog

最佳的使用方法是互相组合：把soft颜色作为背景色，把bold颜色作为前景色：

--bulma-primary-soft as background
--bulma-primary-bold as foreground 		The quick brown fox jumps over the lazy dog

深色模式下自动切换

当你在深色模式和浅色模式之间切换的时候，soft和dark的配色将自动跟随，无需手动干预。

系统默认 浅色模式 深色模式
The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog

反转色

反转色-invert概念是可以轻松设定两个融合在一起颜色的对比效果；例如，但你使用primary-light来作为背景色的时候，你可以给字体的配色加个后缀primary-light-invert，来自动设定一个系统指定的颜色：

Background --bulma-primary bulma-primary-invert on bulma-primary
Foreground --bulma-primary-invert
Background --bulma-primary-light bulma-primary-light-invert on bulma-primary-light
Foreground --bulma-primary-light-invert
Background --bulma-primary-dark bulma-primary-dark-invert on bulma-primary-dark
Foreground --bulma-primary-dark-invert

21灰度系列

系统为预设的基础色预设了21个灰度颜色供选用，同时也包括对应的-invert反转色；标准是根据0%到100%进行梯度变化，以5%的增量进行跳档。

I am saying around 0% because the last digit is determined by the base color. If the base color’s lightness is 42%, then --bulma-primary-00 will be 2%, not 0%.

--bulma-primary-00 --bulma-primary-00-invert
--bulma-primary-05 --bulma-primary-05-invert
--bulma-primary-10 --bulma-primary-10-invert
--bulma-primary-15 --bulma-primary-15-invert
--bulma-primary-20 --bulma-primary-20-invert
--bulma-primary-25 --bulma-primary-25-invert
--bulma-primary-30 --bulma-primary-30-invert
--bulma-primary-35 --bulma-primary-35-invert
--bulma-primary-40 --bulma-primary-40-invert
--bulma-primary-45 --bulma-primary-45-invert
--bulma-primary-50 --bulma-primary-50-invert
--bulma-primary-55 --bulma-primary-55-invert
--bulma-primary-60 --bulma-primary-60-invert
--bulma-primary-65 --bulma-primary-65-invert
--bulma-primary-70 --bulma-primary-70-invert
--bulma-primary-75 --bulma-primary-75-invert
--bulma-primary-80 --bulma-primary-80-invert
--bulma-primary-85 --bulma-primary-85-invert
--bulma-primary-90 --bulma-primary-90-invert
--bulma-primary-95 --bulma-primary-95-invert
--bulma-primary-100 --bulma-primary-100-invert

反转色自动匹配的示例：

Background --bulma-primary-00 bulma-primary-00-invert on bulma-primary-00
Foreground --bulma-primary-00-invert
Background --bulma-primary-05 bulma-primary-05-invert on bulma-primary-05
Foreground --bulma-primary-05-invert
Background --bulma-primary-10 bulma-primary-10-invert on bulma-primary-10
Foreground --bulma-primary-10-invert
Background --bulma-primary-15 bulma-primary-15-invert on bulma-primary-15
Foreground --bulma-primary-15-invert
Background --bulma-primary-20 bulma-primary-20-invert on bulma-primary-20
Foreground --bulma-primary-20-invert
Background --bulma-primary-25 bulma-primary-25-invert on bulma-primary-25
Foreground --bulma-primary-25-invert
Background --bulma-primary-30 bulma-primary-30-invert on bulma-primary-30
Foreground --bulma-primary-30-invert
Background --bulma-primary-35 bulma-primary-35-invert on bulma-primary-35
Foreground --bulma-primary-35-invert
Background --bulma-primary-40 bulma-primary-40-invert on bulma-primary-40
Foreground --bulma-primary-40-invert
Background --bulma-primary-45 bulma-primary-45-invert on bulma-primary-45
Foreground --bulma-primary-45-invert
Background --bulma-primary-50 bulma-primary-50-invert on bulma-primary-50
Foreground --bulma-primary-50-invert
Background --bulma-primary-55 bulma-primary-55-invert on bulma-primary-55
Foreground --bulma-primary-55-invert
Background --bulma-primary-60 bulma-primary-60-invert on bulma-primary-60
Foreground --bulma-primary-60-invert
Background --bulma-primary-65 bulma-primary-65-invert on bulma-primary-65
Foreground --bulma-primary-65-invert
Background --bulma-primary-70 bulma-primary-70-invert on bulma-primary-70
Foreground --bulma-primary-70-invert
Background --bulma-primary-75 bulma-primary-75-invert on bulma-primary-75
Foreground --bulma-primary-75-invert
Background --bulma-primary-80 bulma-primary-80-invert on bulma-primary-80
Foreground --bulma-primary-80-invert
Background --bulma-primary-85 bulma-primary-85-invert on bulma-primary-85
Foreground --bulma-primary-85-invert
Background --bulma-primary-90 bulma-primary-90-invert on bulma-primary-90
Foreground --bulma-primary-90-invert
Background --bulma-primary-95 bulma-primary-95-invert on bulma-primary-95
Foreground --bulma-primary-95-invert
Background --bulma-primary-100 bulma-primary-100-invert on bulma-primary-100
Foreground --bulma-primary-100-invert

浅色模式下CSS变量

如果你想使用自己的颜色来实现这些颜色的梯度变化, 可以更改通过CSS变量的后缀-l来改变lightness属性值。
If you write your own CSS and want to use one these shades yourself, you can access the lightness value via its dedicated CSS variable that has a -l suffix.

例如, bulma-primary-75 可以这样来指定:

:root {
  --bulma-primary-75: hsla(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-75-l),
    1
  );
}

这样做的话, --bulma-primary-75-l 就等同于 76%, 你就可以使用var(--bulma-primary-75-l) 这个CSS变量了。
In this case, --bulma-primary-75-l is equal to 76%, and you can access its value with the var(--bulma-primary-75-l) CSS variable.

CSS helper classes

While you can access all a color’s CSS variables directly by writing color: var(--bulma-primary) for example, Bulma also provides CSS helper classes for each color.

Those helper classes exist for to set either the color or the background.

# Color color class background class
--bulma-primary has-text-primary Hello World has-background-primary Hello World 
<span class="has-text-primary">Color</span>
<span class="has-background-primary">Background</span>
--bulma-primary-invert has-text-primary-invert Hello World has-background-primary-invert Hello World 
<span class="has-text-primary-invert">Color</span>
<span class="has-background-primary-invert">Background</span>
--bulma-primary-light has-text-primary-light Hello World has-background-primary-light Hello World 
<span class="has-text-primary-light">Color</span>
<span class="has-background-primary-light">Background</span>
--bulma-primary-light-invert has-text-primary-light-invert Hello World has-background-primary-light-invert Hello World 
<span class="has-text-primary-light-invert">Color</span>
<span class="has-background-primary-light-invert">Background</span>
--bulma-primary-dark has-text-primary-dark Hello World has-background-primary-dark Hello World 
<span class="has-text-primary-dark">Color</span>
<span class="has-background-primary-dark">Background</span>
--bulma-primary-dark-invert has-text-primary-dark-invert Hello World has-background-primary-dark-invert Hello World 
<span class="has-text-primary-dark-invert">Color</span>
<span class="has-background-primary-dark-invert">Background</span>
--bulma-primary-on-scheme has-text-primary-on-scheme Hello World has-background-primary-on-scheme Hello World 
<span class="has-text-primary-on-scheme">Color</span>
<span class="has-background-primary-on-scheme">Background</span>
--bulma-primary-00 has-text-primary-00 Hello World has-background-primary-00 Hello World 
<span class="has-text-primary-00">Color</span>
<span class="has-background-primary-00">Background</span>
--bulma-primary-05 has-text-primary-05 Hello World has-background-primary-05 Hello World 
<span class="has-text-primary-05">Color</span>
<span class="has-background-primary-05">Background</span>
--bulma-primary-10 has-text-primary-10 Hello World has-background-primary-10 Hello World 
<span class="has-text-primary-10">Color</span>
<span class="has-background-primary-10">Background</span>
--bulma-primary-15 has-text-primary-15 Hello World has-background-primary-15 Hello World 
<span class="has-text-primary-15">Color</span>
<span class="has-background-primary-15">Background</span>
--bulma-primary-20 has-text-primary-20 Hello World has-background-primary-20 Hello World 
<span class="has-text-primary-20">Color</span>
<span class="has-background-primary-20">Background</span>
--bulma-primary-25 has-text-primary-25 Hello World has-background-primary-25 Hello World 
<span class="has-text-primary-25">Color</span>
<span class="has-background-primary-25">Background</span>
--bulma-primary-30 has-text-primary-30 Hello World has-background-primary-30 Hello World 
<span class="has-text-primary-30">Color</span>
<span class="has-background-primary-30">Background</span>
--bulma-primary-35 has-text-primary-35 Hello World has-background-primary-35 Hello World 
<span class="has-text-primary-35">Color</span>
<span class="has-background-primary-35">Background</span>
--bulma-primary-40 has-text-primary-40 Hello World has-background-primary-40 Hello World 
<span class="has-text-primary-40">Color</span>
<span class="has-background-primary-40">Background</span>
--bulma-primary-45 has-text-primary-45 Hello World has-background-primary-45 Hello World 
<span class="has-text-primary-45">Color</span>
<span class="has-background-primary-45">Background</span>
--bulma-primary-50 has-text-primary-50 Hello World has-background-primary-50 Hello World 
<span class="has-text-primary-50">Color</span>
<span class="has-background-primary-50">Background</span>
--bulma-primary-55 has-text-primary-55 Hello World has-background-primary-55 Hello World 
<span class="has-text-primary-55">Color</span>
<span class="has-background-primary-55">Background</span>
--bulma-primary-60 has-text-primary-60 Hello World has-background-primary-60 Hello World 
<span class="has-text-primary-60">Color</span>
<span class="has-background-primary-60">Background</span>
--bulma-primary-65 has-text-primary-65 Hello World has-background-primary-65 Hello World 
<span class="has-text-primary-65">Color</span>
<span class="has-background-primary-65">Background</span>
--bulma-primary-70 has-text-primary-70 Hello World has-background-primary-70 Hello World 
<span class="has-text-primary-70">Color</span>
<span class="has-background-primary-70">Background</span>
--bulma-primary-75 has-text-primary-75 Hello World has-background-primary-75 Hello World 
<span class="has-text-primary-75">Color</span>
<span class="has-background-primary-75">Background</span>
--bulma-primary-80 has-text-primary-80 Hello World has-background-primary-80 Hello World 
<span class="has-text-primary-80">Color</span>
<span class="has-background-primary-80">Background</span>
--bulma-primary-85 has-text-primary-85 Hello World has-background-primary-85 Hello World 
<span class="has-text-primary-85">Color</span>
<span class="has-background-primary-85">Background</span>
--bulma-primary-90 has-text-primary-90 Hello World has-background-primary-90 Hello World 
<span class="has-text-primary-90">Color</span>
<span class="has-background-primary-90">Background</span>
--bulma-primary-95 has-text-primary-95 Hello World has-background-primary-95 Hello World 
<span class="has-text-primary-95">Color</span>
<span class="has-background-primary-95">Background</span>
--bulma-primary-100 has-text-primary-100 Hello World has-background-primary-100 Hello World 
<span class="has-text-primary-100">Color</span>
<span class="has-background-primary-100">Background</span>

赞助

One-time donation

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#