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 Color schemes. 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.
Blueprint Colors Schemes:
- Sequential color schemes: This color scheme is best suited for representing data that ranges from low-to-high values either on an ordinal or on a numerical scale.
- Diverging color schemes: This color scheme put equal weightage on the mid-range and extreme values at both ends of the data range.
- Qualitative color schemes: This color scheme uses a series of unrelated colors to make a scheme that does not imply order, merely a difference in kind.
Syntax:
<div style={{ backgroundColor: "#2D72D2" }}>...</div> <h3 style={{ color: "#77450D" }}>...</h3>
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 the Sequential Color Scheme.
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 Color schemes</h1>
</div>
<div>
<h2 style={{ textAlign: "center" ,
color: "green" }}>
Sequential Color Scheme
</h2>
<div style={{ padding: 20, display: "flex" ,
flexDirection: "row" }}>
<div style={{ padding: 10 }}>
<div style={{ backgroundColor: "#CFF3D2" ,
padding: 20 }}>
#CFF3D2
</div>
<div style={{ backgroundColor: "#8BCDBC" ,
padding: 20 }}>
#8BCDBC
</div>
<div style={{ backgroundColor: "#59A3AC" ,
padding: 20 }}>
#59A3AC
</div>
<div style={{ backgroundColor: "#3878A1" ,
padding: 20 }}>
#3878A1
</div>
<div style={{ backgroundColor: "#1F4B99" ,
padding: 20 }}>
#1F4B99
</div>
</div>
<div style={{ padding: 10 }}>
<div style={{ backgroundColor: "#97F3EB" ,
padding: 20 }}>
#CFF3D2
</div>
<div style={{ backgroundColor: "#78D5CC" ,
padding: 20 }}>
#8BCDBC
</div>
<div style={{ backgroundColor: "#58B8AE" ,
padding: 20 }}>
#59A3AC
</div>
<div style={{ backgroundColor: "#369C91" ,
padding: 20 }}>
#3878A1
</div>
<div style={{ backgroundColor: "#008075" ,
padding: 20 }}>
#1F4B99
</div>
</div>
</div>
</div>
</>
);
} export default App;
|
Output:
Example 2: Below example demonstrates the usage of the Diverging Color Scheme.
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 Color schemes</h1>
</div>
<div>
<h2 style={{ textAlign: "center" , color: "green" }}>
Diverging Color Scheme
</h2>
<div style={{
padding: 20, display: "flex" ,
flexDirection: "row"
}}>
<div style={{
display: 'flex' , flexDirection: 'column' ,
paddingRight: 10
}}>
<div style={{
backgroundColor: '#1F4B99' ,
padding: 20,
color: 'white'
}}>
#1F4B99
</div>
<div style={{
backgroundColor: '#6CACB9' , padding: 20,
color: 'white'
}}>
#6CACB9
</div>
<div style={{
backgroundColor: '#FFFFFF' , padding: 20,
color: 'black'
}}>
#FFFFFF
</div>
<div style={{
backgroundColor: '#DF9563' , padding: 20,
color: 'white'
}}>
#DF9563
</div>
<div style={{
backgroundColor: '#9E2B0E' , padding: 20,
color: 'white'
}}>
#9E2B0E
</div>
</div>
<div style={{
display: 'flex' , flexDirection:
'column' , paddingRight: 10
}}>
<div style={{
backgroundColor: '#1D7324' ,
padding: 20, color: 'white'
}}>
#1D7324
</div>
<div style={{
backgroundColor: '#8BAE44' ,
padding: 20, color: 'white'
}}>
#8BAE44
</div>
<div style={{
backgroundColor: '#FFE39F' ,
padding: 20, color: 'white'
}}>
#FFE39F
</div>
<div style={{
backgroundColor: '#6B9FA1' ,
padding: 20, color: 'white'
}}>
#6B9FA1
</div>
<div style={{
backgroundColor: '#1F4B99' ,
padding: 20, color: 'white'
}}>
#1F4B99
</div>
</div>
</div>
</div>
</>
);
} export default App;
|
Output:
Example 3: Below example demonstrates the usage of the Qualitative Color Scheme.
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 Color schemes</h1>
</div>
<div>
<h2 style={{ textAlign: "center" , color: "green" }}>
Qualitative Color Scheme
</h2>
<div style={{ padding: 20, display: "flex" ,
flexDirection: "row" }}>
<div
style={{ backgroundColor: "#147EB3" ,
padding: 20, color: "white" }}
>
#147EB3
</div>
<div
style={{ backgroundColor: "#29A634" ,
padding: 20, color: "white" }}
>
#147EB3
</div>
<div
style={{ backgroundColor: "#D1980B" ,
padding: 20, color: "white" }}
>
#D1980B
</div>
<div
style={{ backgroundColor: "#D33D17" ,
padding: 20, color: "white" }}
>
#D33D17
</div>
<div
style={{ backgroundColor: "#9D3F9D" ,
padding: 20, color: "white" }}
>
#9D3F9D
</div>
</div>
</div>
</>
);
} export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#core/colors.color-schemes