Logo: Ubie Vitals

Primitive Colors

ユビーで扱うColorの、基本となる構成要素

Colorの活用を考える場合、まずはSemantic Colorsを参照してください。

各カラーチップにW3Cで定義されたコントラスト基準を達成するかを表示しています。AAかつ22px 以下の文字サイズを条件としています。ブラックにアルファがある関係で一部計算の精度が低いものがあります。参考として閲覧してください。

Blue#

A PASS

A FAIL

Ubie Blue 100

  • HEX

    #f2f6fd

  • CSS Variables

    --color-ubie-blue-100

  • JavaScript Object

    DesignTokens.color['ubie-blue-100']

A PASS

A FAIL

Ubie Blue 200

  • HEX

    #cbd3f2

  • CSS Variables

    --color-ubie-blue-200

  • JavaScript Object

    DesignTokens.color['ubie-blue-200']

A FAIL

A FAIL

Ubie Blue 400

  • HEX

    #6a82d9

  • CSS Variables

    --color-ubie-blue-400

  • JavaScript Object

    DesignTokens.color['ubie-blue-400']

A FAIL

A PASS

Ubie Blue 500

  • HEX

    #3959cc

  • CSS Variables

    --color-ubie-blue-500

  • JavaScript Object

    DesignTokens.color['ubie-blue-500']

A FAIL

A PASS

Ubie Blue 700

  • HEX

    #263f94

  • CSS Variables

    --color-ubie-blue-700

  • JavaScript Object

    DesignTokens.color['ubie-blue-700']

Pink#

A PASS

A FAIL

Ubie Pink 100

  • HEX

    #fdf2f9

  • CSS Variables

    --color-ubie-pink-100

  • JavaScript Object

    DesignTokens.color['ubie-pink-100']

A PASS

A FAIL

Ubie Pink 200

  • HEX

    #f8cfde

  • CSS Variables

    --color-ubie-pink-200

  • JavaScript Object

    DesignTokens.color['ubie-pink-200']

A PASS

A FAIL

Ubie Pink 400

  • HEX

    #ea77a1

  • CSS Variables

    --color-ubie-pink-400

  • JavaScript Object

    DesignTokens.color['ubie-pink-400']

A FAIL

A PASS

Ubie Pink 500

  • HEX

    #da3170

  • CSS Variables

    --color-ubie-pink-500

  • JavaScript Object

    DesignTokens.color['ubie-pink-500']

A FAIL

A PASS

Ubie Pink 700

  • HEX

    #a33961

  • CSS Variables

    --color-ubie-pink-700

  • JavaScript Object

    DesignTokens.color['ubie-pink-700']

Red#

A PASS

A FAIL

Ubie Red 100

  • HEX

    #fcf4f4

  • CSS Variables

    --color-ubie-red-100

  • JavaScript Object

    DesignTokens.color['ubie-red-100']

A PASS

A FAIL

Ubie Red 200

  • HEX

    #f6d0d0

  • CSS Variables

    --color-ubie-red-200

  • JavaScript Object

    DesignTokens.color['ubie-red-200']

A PASS

A FAIL

Ubie Red 400

  • HEX

    #ec6d6d

  • CSS Variables

    --color-ubie-red-400

  • JavaScript Object

    DesignTokens.color['ubie-red-400']

A FAIL

A PASS

Ubie Red 500

  • HEX

    #db3939

  • CSS Variables

    --color-ubie-red-500

  • JavaScript Object

    DesignTokens.color['ubie-red-500']

A FAIL

A PASS

Ubie Red 700

  • HEX

    #b02b2b

  • CSS Variables

    --color-ubie-red-700

  • JavaScript Object

    DesignTokens.color['ubie-red-700']

Black#

A PASS

A FAIL

Ubie Black 100

  • HEX

    #16191f / 4%

  • CSS Variables

    --color-ubie-black-100

  • JavaScript Object

    DesignTokens.color['ubie-black-100']

A PASS

A FAIL

Ubie Black 200

  • HEX

    #16191f / 18%

  • CSS Variables

    --color-ubie-black-200

  • JavaScript Object

    DesignTokens.color['ubie-black-200']

A PASS

A FAIL

Ubie Black 400

  • HEX

    #16191f / 48%

  • CSS Variables

    --color-ubie-black-400

  • JavaScript Object

    DesignTokens.color['ubie-black-400']

A FAIL

A PASS

Ubie Black 500

  • HEX

    #16191f / 64%

  • CSS Variables

    --color-ubie-black-500

  • JavaScript Object

    DesignTokens.color['ubie-black-500']

A FAIL

A PASS

Ubie Black 700

  • HEX

    #16191f / 90%

  • CSS Variables

    --color-ubie-black-700

  • JavaScript Object

    DesignTokens.color['ubie-black-700']

A FAIL

A PASS

Ubie Black 900

  • HEX

    #16191f

  • CSS Variables

    --color-ubie-black-900

  • JavaScript Object

    DesignTokens.color['ubie-black-900']

White#

A PASS

A FAIL

Ubie White

  • HEX

    #ffffff

  • CSS Variables

    --color-ubie-white

  • JavaScript Object

    DesignTokens.color['ubie-white']