Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss React.js Blueprint Colors Core colors. Colors are a very important component used in styling a web application. The React.js Blueprint provides different types of color schemes that can be used while styling a web application. The core colors are used in user interface design and each color is linked to what we call a visual intent.
Blueprint Core Colors:
- Blue: This color is available in 5 different shades i.e. from Blue 1 to 5. Its intent is primary.
- Green: This color is available in 5 different shades i.e. from Green 1 to 5. Its intent is a success.
- Orange: This color is available in 5 different shades i.e. from Orange 1 to 5. Its intent is a warning.
- Red: This color is available in 5 different shades i.e. from Red 1 to 5. Its intent is danger.
Syntax:
<div style={{ backgroundColor: "#2D72D2" }}>...</div> <h1 style={{ color: "#77450D" }}>...</h1>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:
Example 1: Below example demonstrates the usage of Core color as the background color.
import React from "react" ;
import "@blueprintjs/core/lib/css/blueprint.css" ;
function App() {
return (
<>
<div style={{ padding: 20,
textAlign: "center" ,
color: "green" }}>
<h1>
ReactJS BluePrint Colors Core colors
</h1>
</div>
<div style={{ display: "flex" ,
flexDirection: "row" }}>
<div style={{ color: "black" , padding: 20 }}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#184A90" ,
color: "white" ,
}}
>
Blue -1
</div>
<div
style={{
padding: 10,
backgroundColor: "#215DB0" ,
color: "white" ,
}}
>
Blue -2
</div>
<div style={{ padding: 10,
backgroundColor: "#2D72D2" }}>
Blue -3
</div>
<div style={{ padding: 10,
backgroundColor: "#4C90F0" }}>
Blue -4
</div>
<div style={{ padding: 10,
backgroundColor: "#8ABBFF" }}>
Blue -5
</div>
</div>
</div>
<div style={{ color: "black" ,
textAlign: "left" , padding: 20 }}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#8E292C" ,
color: "white" ,
}}
>
Red-1
</div>
<div
style={{
padding: 10,
backgroundColor: "#AC2F33" ,
color: "white" ,
}}
>
Red-2
</div>
<div style={{ padding: 10,
backgroundColor: "#CD4246" }}>Red-3</div>
<div style={{ padding: 10,
backgroundColor: "#E76A6E" }}>Red-4</div>
<div style={{ padding: 10,
backgroundColor: "#FA999C" }}>Red-5</div>
</div>
</div>
<div style={{ color: "black" ,
textAlign: "left" , padding: 20 }}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#165A36" ,
color: "white" ,
}}
>
Green-1
</div>
<div
style={{
padding: 10,
backgroundColor: "#1C6E42" ,
color: "white" ,
}}
>
Green-2
</div>
<div style={{ padding: 10,
backgroundColor: "#238551" }}>
Green-3
</div>
<div style={{ padding: 10,
backgroundColor: "#32A467" }}>
Green-4
</div>
<div style={{ padding: 10,
backgroundColor: "#72CA9B" }}>
Green-5
</div>
</div>
</div>
<div style={{ color: "black" ,
textAlign: "left" ,
padding: 20 }}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#77450D" ,
color: "white" ,
}}
>
Orange-1
</div>
<div
style={{
padding: 10,
backgroundColor: "#935610" ,
color: "white" ,
}}
>
Orange-2
</div>
<div style={{ padding: 10,
backgroundColor: "#C87619" }}>
Orange-3
</div>
<div style={{ padding: 10,
backgroundColor: "#EC9A3C" }}>
Orange-4
</div>
<div style={{ padding: 10,
backgroundColor: "#FBB360" }}>
Orange-5
</div>
</div>
</div>
</div>
</>
);
} export default App;
|
Output:
Example 2: Below example demonstrates the usage of Core color as the text color.
import React from "react" ;
import "@blueprintjs/core/lib/css/blueprint.css" ;
function App() {
return (
<>
<div style={{ padding: 20,
textAlign: "center" ,
color: "green" }}>
<h1>ReactJS BluePrint Colors Core colors</h1>
</div>
<div>
<div style={{ padding: 20, display: "flex" ,
flexDirection: "row" }}>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#8E292C" }}>
Red color 1
</h1>
<h2 style={{ color: "#AC2F33" }}>
Red color 2
</h2>
<h3 style={{ color: "#CD4246" }}>
Red color 3
</h3>
<h4 style={{ color: "#E76A6E" }}>
Red color 4
</h4>
<h5 style={{ color: "#FA999C" }}>
Red color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#165A36" }}>
Green color 1
</h1>
<h2 style={{ color: "#1C6E42" }}>
Green color 2
</h2>
<h3 style={{ color: "#238551" }}>
Green color 3
</h3>
<h4 style={{ color: "#32A467" }}>
Green color 4
</h4>
<h5 style={{ color: "#72CA9B" }}>
Green color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#184A90" }}>
Blue color 1
</h1>
<h2 style={{ color: "#215DB0" }}>
Blue color 2
</h2>
<h3 style={{ color: "#2D72D2" }}>
Blue color 3
</h3>
<h4 style={{ color: "#4C90F0" }}>
Blue color 4
</h4>
<h5 style={{ color: "#8ABBFF" }}>
Blue color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#77450D" }}>
Orange color 1
</h1>
<h2 style={{ color: "#935610" }}>
Orange color 2
</h2>
<h3 style={{ color: "#C87619" }}>
Orange color 3
</h3>
<h4 style={{ color: "#EC9A3C" }}>
Orange color 4
</h4>
<h5 style={{ color: "#FBB360" }}>
Orange color 5
</h5>
</div>
</div>
</div>
</>
);
} export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#core/colors.core-colors