Primitive Colors

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

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

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

Blue#

A PASS

A FAIL

Ubie Blue 100

HEX
#f0f2fc
CSS Variables
--color-ubie-blue-100
JavaScript Object
DesignTokens.color['ubie-blue-100']

A PASS

A FAIL

Ubie Blue 200

HEX
#cfd7f3
CSS Variables
--color-ubie-blue-200
JavaScript Object
DesignTokens.color['ubie-blue-200']

A PASS

A FAIL

Ubie Blue 300

HEX
#aab8e9
CSS Variables
--color-ubie-blue-300
JavaScript Object
DesignTokens.color['ubie-blue-300']

A FAIL

Ubie Blue 400

HEX
#8296df
CSS Variables
--color-ubie-blue-400
JavaScript Object
DesignTokens.color['ubie-blue-400']

A FAIL

Ubie Blue 500

HEX
#5d77d5
CSS Variables
--color-ubie-blue-500
JavaScript Object
DesignTokens.color['ubie-blue-500']

A FAIL

A PASS

Ubie Blue 600

HEX
#3959cc
CSS Variables
--color-ubie-blue-600
JavaScript Object
DesignTokens.color['ubie-blue-600']

A FAIL

A PASS

Ubie Blue 700

HEX
#304cad
CSS Variables
--color-ubie-blue-700
JavaScript Object
DesignTokens.color['ubie-blue-700']

A FAIL

A PASS

Ubie Blue 800

HEX
#283f91
CSS Variables
--color-ubie-blue-800
JavaScript Object
DesignTokens.color['ubie-blue-800']

A FAIL

A PASS

Ubie Blue 900

HEX
#203374
CSS Variables
--color-ubie-blue-900
JavaScript Object
DesignTokens.color['ubie-blue-900']

A FAIL

A PASS

Ubie Blue 1000

HEX
#1a285c
CSS Variables
--color-ubie-blue-1000
JavaScript Object
DesignTokens.color['ubie-blue-1000']

Pink#

A PASS

A FAIL

Ubie Pink 100

HEX
#fcf0f5
CSS Variables
--color-ubie-pink-100
JavaScript Object
DesignTokens.color['ubie-pink-100']

A PASS

A FAIL

Ubie Pink 200

HEX
#f6cedd
CSS Variables
--color-ubie-pink-200
JavaScript Object
DesignTokens.color['ubie-pink-200']

A PASS

A FAIL

Ubie Pink 300

HEX
#efa6c2
CSS Variables
--color-ubie-pink-300
JavaScript Object
DesignTokens.color['ubie-pink-300']

A PASS

A FAIL

Ubie Pink 400

HEX
#e87da5
CSS Variables
--color-ubie-pink-400
JavaScript Object
DesignTokens.color['ubie-pink-400']

A FAIL

Ubie Pink 500

HEX
#e1568a
CSS Variables
--color-ubie-pink-500
JavaScript Object
DesignTokens.color['ubie-pink-500']

A FAIL

A PASS

Ubie Pink 600

HEX
#da3170
CSS Variables
--color-ubie-pink-600
JavaScript Object
DesignTokens.color['ubie-pink-600']

A FAIL

A PASS

Ubie Pink 700

HEX
#b92a5f
CSS Variables
--color-ubie-pink-700
JavaScript Object
DesignTokens.color['ubie-pink-700']

A FAIL

A PASS

Ubie Pink 800

HEX
#9b2350
CSS Variables
--color-ubie-pink-800
JavaScript Object
DesignTokens.color['ubie-pink-800']

A FAIL

A PASS

Ubie Pink 900

HEX
#7c1c40
CSS Variables
--color-ubie-pink-900
JavaScript Object
DesignTokens.color['ubie-pink-900']

A FAIL

A PASS

Ubie Pink 1000

HEX
#621632
CSS Variables
--color-ubie-pink-1000
JavaScript Object
DesignTokens.color['ubie-pink-1000']

Orange#

A PASS

A FAIL

Ubie Orange 100

HEX
#fff9f0
CSS Variables
--color-ubie-orange-100
JavaScript Object
DesignTokens.color['ubie-orange-100']

A PASS

A FAIL

Ubie Orange 200

HEX
#ffe8c8
CSS Variables
--color-ubie-orange-200
JavaScript Object
DesignTokens.color['ubie-orange-200']

A PASS

A FAIL

Ubie Orange 300

HEX
#ffd79d
CSS Variables
--color-ubie-orange-300
JavaScript Object
DesignTokens.color['ubie-orange-300']

A PASS

A FAIL

Ubie Orange 400

HEX
#ffc46f
CSS Variables
--color-ubie-orange-400
JavaScript Object
DesignTokens.color['ubie-orange-400']

A PASS

A FAIL

Ubie Orange 500

HEX
#ffb243
CSS Variables
--color-ubie-orange-500
JavaScript Object
DesignTokens.color['ubie-orange-500']

A PASS

A FAIL

Ubie Orange 600

HEX
#ffa11a
CSS Variables
--color-ubie-orange-600
JavaScript Object
DesignTokens.color['ubie-orange-600']

A FAIL

Ubie Orange 700

HEX
#d98916
CSS Variables
--color-ubie-orange-700
JavaScript Object
DesignTokens.color['ubie-orange-700']

A FAIL

Ubie Orange 800

HEX
#b57212
CSS Variables
--color-ubie-orange-800
JavaScript Object
DesignTokens.color['ubie-orange-800']

A FAIL

A PASS

Ubie Orange 900

HEX
#915c0f
CSS Variables
--color-ubie-orange-900
JavaScript Object
DesignTokens.color['ubie-orange-900']

A FAIL

A PASS

Ubie Orange 1000

HEX
#73480c
CSS Variables
--color-ubie-orange-1000
JavaScript Object
DesignTokens.color['ubie-orange-1000']

Purple#

A PASS

A FAIL

Ubie Purple 100

HEX
#f8effc
CSS Variables
--color-ubie-purple-100
JavaScript Object
DesignTokens.color['ubie-purple-100']

A PASS

A FAIL

Ubie Purple 200

HEX
#e9cdf9
CSS Variables
--color-ubie-purple-200
JavaScript Object
DesignTokens.color['ubie-purple-200']

A PASS

A FAIL

Ubie Purple 300

HEX
#d7a6f3
CSS Variables
--color-ubie-purple-300
JavaScript Object
DesignTokens.color['ubie-purple-300']

A FAIL

Ubie Purple 400

HEX
#c47dee
CSS Variables
--color-ubie-purple-400
JavaScript Object
DesignTokens.color['ubie-purple-400']

A FAIL

Ubie Purple 500

HEX
#b355e9
CSS Variables
--color-ubie-purple-500
JavaScript Object
DesignTokens.color['ubie-purple-500']

A FAIL

A PASS

Ubie Purple 600

HEX
#a230e4
CSS Variables
--color-ubie-purple-600
JavaScript Object
DesignTokens.color['ubie-purple-600']

A FAIL

A PASS

Ubie Purple 700

HEX
#8a29c2
CSS Variables
--color-ubie-purple-700
JavaScript Object
DesignTokens.color['ubie-purple-700']

A FAIL

A PASS

Ubie Purple 800

HEX
#7322a2
CSS Variables
--color-ubie-purple-800
JavaScript Object
DesignTokens.color['ubie-purple-800']

A FAIL

A PASS

Ubie Purple 900

HEX
#5c1b82
CSS Variables
--color-ubie-purple-900
JavaScript Object
DesignTokens.color['ubie-purple-900']

A FAIL

A PASS

Ubie Purple 1000

HEX
#491667
CSS Variables
--color-ubie-purple-1000
JavaScript Object
DesignTokens.color['ubie-purple-1000']

Green#

A PASS

A FAIL

Ubie Green 100

HEX
#e9faf4
CSS Variables
--color-ubie-green-100
JavaScript Object
DesignTokens.color['ubie-green-100']

A PASS

A FAIL

Ubie Green 200

HEX
#cbf3e5
CSS Variables
--color-ubie-green-200
JavaScript Object
DesignTokens.color['ubie-green-200']

A PASS

A FAIL

Ubie Green 300

HEX
#a2e9d0
CSS Variables
--color-ubie-green-300
JavaScript Object
DesignTokens.color['ubie-green-300']

A PASS

A FAIL

Ubie Green 400

HEX
#77dfba
CSS Variables
--color-ubie-green-400
JavaScript Object
DesignTokens.color['ubie-green-400']

A PASS

A FAIL

Ubie Green 500

HEX
#4ed5a5
CSS Variables
--color-ubie-green-500
JavaScript Object
DesignTokens.color['ubie-green-500']

A PASS

A FAIL

Ubie Green 600

HEX
#27cc91
CSS Variables
--color-ubie-green-600
JavaScript Object
DesignTokens.color['ubie-green-600']

A FAIL

Ubie Green 700

HEX
#21ad7b
CSS Variables
--color-ubie-green-700
JavaScript Object
DesignTokens.color['ubie-green-700']

A FAIL

Ubie Green 800

HEX
#1c9167
CSS Variables
--color-ubie-green-800
JavaScript Object
DesignTokens.color['ubie-green-800']

A FAIL

A PASS

Ubie Green 900

HEX
#167453
CSS Variables
--color-ubie-green-900
JavaScript Object
DesignTokens.color['ubie-green-900']

A FAIL

A PASS

Ubie Green 1000

HEX
#125c41
CSS Variables
--color-ubie-green-1000
JavaScript Object
DesignTokens.color['ubie-green-1000']

Red#

A PASS

A FAIL

Ubie Red 100

HEX
#fceff2
CSS Variables
--color-ubie-red-100
JavaScript Object
DesignTokens.color['ubie-red-100']

A PASS

A FAIL

Ubie Red 200

HEX
#f8cdd6
CSS Variables
--color-ubie-red-200
JavaScript Object
DesignTokens.color['ubie-red-200']

A PASS

A FAIL

Ubie Red 300

HEX
#f3a5b6
CSS Variables
--color-ubie-red-300
JavaScript Object
DesignTokens.color['ubie-red-300']

A PASS

A FAIL

Ubie Red 400

HEX
#ed7b94
CSS Variables
--color-ubie-red-400
JavaScript Object
DesignTokens.color['ubie-red-400']

A FAIL

Ubie Red 500

HEX
#e85474
CSS Variables
--color-ubie-red-500
JavaScript Object
DesignTokens.color['ubie-red-500']

A FAIL

Ubie Red 600

HEX
#e32e55
CSS Variables
--color-ubie-red-600
JavaScript Object
DesignTokens.color['ubie-red-600']

A FAIL

A PASS

Ubie Red 700

HEX
#c12748
CSS Variables
--color-ubie-red-700
JavaScript Object
DesignTokens.color['ubie-red-700']

A FAIL

A PASS

Ubie Red 800

HEX
#a1213c
CSS Variables
--color-ubie-red-800
JavaScript Object
DesignTokens.color['ubie-red-800']

A FAIL

A PASS

Ubie Red 900

HEX
#811a30
CSS Variables
--color-ubie-red-900
JavaScript Object
DesignTokens.color['ubie-red-900']

A FAIL

A PASS

Ubie Red 1000

HEX
#661526
CSS Variables
--color-ubie-red-1000
JavaScript Object
DesignTokens.color['ubie-red-1000']

Black#

A PASS

A FAIL

Ubie Black 100

HEX
#fafafa
CSS Variables
--color-ubie-black-100
JavaScript Object
DesignTokens.color['ubie-black-100']

A PASS

A FAIL

Ubie Black 200

HEX
#f6f6f6
CSS Variables
--color-ubie-black-200
JavaScript Object
DesignTokens.color['ubie-black-200']

A PASS

A FAIL

Ubie Black 300

HEX
#dcdddd
CSS Variables
--color-ubie-black-300
JavaScript Object
DesignTokens.color['ubie-black-300']

A PASS

A FAIL

Ubie Black 400

HEX
#c5c6c7
CSS Variables
--color-ubie-black-400
JavaScript Object
DesignTokens.color['ubie-black-400']

A FAIL

Ubie Black 500

HEX
#96989a
CSS Variables
--color-ubie-black-500
JavaScript Object
DesignTokens.color['ubie-black-500']

A FAIL

A PASS

Ubie Black 600

HEX
#686a6d
CSS Variables
--color-ubie-black-600
JavaScript Object
DesignTokens.color['ubie-black-600']

A FAIL

A PASS

Ubie Black 700

HEX
#55575b
CSS Variables
--color-ubie-black-700
JavaScript Object
DesignTokens.color['ubie-black-700']

A FAIL

A PASS

Ubie Black 800

HEX
#393c41
CSS Variables
--color-ubie-black-800
JavaScript Object
DesignTokens.color['ubie-black-800']

A FAIL

A PASS

Ubie Black 900

HEX
#32353a
CSS Variables
--color-ubie-black-900
JavaScript Object
DesignTokens.color['ubie-black-900']

A FAIL

A PASS

Ubie Black 1000

HEX
#16191f
CSS Variables
--color-ubie-black-1000
JavaScript Object
DesignTokens.color['ubie-black-1000']

White#

A PASS

A FAIL

Ubie White

HEX
#ffffff
CSS Variables
--color-ubie-white
JavaScript Object
DesignTokens.color['ubie-white']

ubie-oss/design-tokens

Primitive Colors

Blue#

Pink#

Orange#

Purple#

Green#

Red#

Black#

White#

Related resources#