import React from
"react"
;
import
"@blueprintjs/core/lib/css/blueprint.css"
;
function
App() {
return
(
<>
<div>
<h1>
ReactJS BluePrint Colors Extended colors
</h1>
</div>
<div style={{
display:
"flex"
,
flexDirection:
"row"
}}>
<div style={{ color:
"black"
, padding: 20 }}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor:
"#96290D"
,
color:
"white"
,
}}
>
Vermilion -1
</div>
<div
style={{
padding: 10,
backgroundColor:
"#B83211"
,
color:
"white"
,
}}
>
Vermilion -2
</div>
<div style={{
padding: 10,
backgroundColor:
"#D33D17"
}}>
Vermilion -3
</div>
<div style={{
padding: 10,
backgroundColor:
"#EB6847"
}}>
Vermilion -4
</div>
<div style={{
padding: 10,
backgroundColor:
"#FF9980"
}}>
Vermilion -5
</div>
</div>
</div>
<div style={{
color:
"black"
,
textAlign:
"left"
, padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor:
"#A82255"
,
color:
"white"
,
}}
>
Rose -1
</div>
<div
style={{
padding: 10,
backgroundColor:
"#C22762"
,
color:
"white"
,
}}
>
Rose -2
</div>
<div style={{
padding: 10,
backgroundColor:
"#DB2C6F"
}}>Rose -3</div>
<div style={{
padding: 10,
backgroundColor:
"#F5498B"
}}>Rose -4</div>
<div style={{
padding: 10,
backgroundColor:
"#FF66A1"
}}>Rose -5</div>
</div>
</div>
<div style={{
color:
"black"
,
textAlign:
"left"
, padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor:
"#5C255C"
,
color:
"white"
,
}}
>
Voilet-1
</div>
<div
style={{
padding: 10,
backgroundColor:
"#7C327C"
,
color:
"white"
,
}}
>
Voilet-2
</div>
<div style={{
padding: 10,
backgroundColor:
"#9D3F9D"
}}>
Voilet-3
</div>
<div style={{
padding: 10,
backgroundColor:
"#BD6BBD"
}}>
Voilet-4
</div>
<div style={{
padding: 10,
backgroundColor:
"#D69FD6"
}}>
Voilet-5
</div>
</div>
</div>
<div style={{
color:
"black"
,
textAlign:
"left"
,
padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor:
"#5642A6"
,
color:
"white"
,
}}
>
Indigo-1
</div>
<div
style={{
padding: 10,
backgroundColor:
"#634DBF"
,
color:
"white"
,
}}
>
Indigo-2
</div>
<div style={{
padding: 10,
backgroundColor:
"#7961DB"
}}>
Indigo-3
</div>
<div style={{
padding: 10,
backgroundColor:
"#9881F3"
}}>
Indigo-4
</div>
<div style={{
padding: 10,
backgroundColor:
"#BDADFF"
}}>
Indigo-5
</div>
</div>
</div>
</div>
</>
);
}
export
default
App;