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 Sequential 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. The BluePrint sequential color schemes are best suited for representing data that ranges from low-to-high values either on an ordinal or on a numerical scale.
React.Js BluePrint Colors Sequential Color Schemes:
- Single hue: This sequential color scheme lets the user use only a single type of color using a numerical value.
- Multi hue: This sequential color scheme is used where there is a need to add multi-hue colors using different numerical values.
Syntax:
<div style={{ backgroundColor: "#97F3EB" | "#78D5CC" | "#58B8AE" | "#369C91" | "#008075" }}> ... </div> <div style={{ backgroundColor: "#CFF3D2" | "#8BCDBC" | "#59A3AC" | "#3878A1" | "#1F4B99" }}> ... </div>
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 single hue sequential color schemes.
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 Sequential color schemes
</h1>
</div>
<div>
<div style={{
padding: 20, display: "flex" ,
flexDirection: "row"
}}>
<div style={{ padding: 10 }}>
<div style={{
backgroundColor: "#FFC940" ,
padding: 20
}}>
#FFC940
</div>
<div style={{
backgroundColor: "#E9A133" ,
padding: 20
}}>
#E9A133
</div>
<div style={{
backgroundColor: "#D27B27" ,
padding: 20
}}>
#D27B27
</div>
<div style={{
backgroundColor: "#B9541A" ,
padding: 20
}}>
#B9541A
</div>
<div style={{
backgroundColor: "#9E2B0E" ,
padding: 20
}}>
#9E2B0E
</div>
</div>
<div style={{ padding: 10 }}>
<div style={{
backgroundColor: "#FFEEC5" ,
padding: 20
}}>
#FFEEC5
</div>
<div style={{
backgroundColor: "#F1AEA4" ,
padding: 20
}}>
#F1AEA4
</div>
<div style={{
backgroundColor: "#D37387" ,
padding: 20
}}>
#D37387
</div>
<div style={{
backgroundColor: "#A3416E" ,
padding: 20
}}>
#A3416E
</div>
<div style={{
backgroundColor: "#5C255C" ,
padding: 20
}}>
#5C255C
</div>
</div>
<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: "#E1BAE1" ,
padding: 20
}}>
#E1BAE1
</div>
<div style={{
backgroundColor: "#DD86AF" ,
padding: 20
}}>
#DD86AF
</div>
<div style={{
backgroundColor: "#C35989" ,
padding: 20
}}>
#C35989
</div>
<div style={{
backgroundColor: "#98366D" ,
padding: 20
}}>
#98366D
</div>
<div style={{
backgroundColor: "#5C255C" ,
padding: 20
}}>
#5C255C
</div>
</div>
</div>
</div>
</>
);
} export default App;
|
Output:
Example 2: Below example demonstrates the usage of multi-hue sequential color schemes.
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 Sequential color schemes
</h1>
</div>
<div>
<div style={{
padding: 20, display: "flex" ,
flexDirection: "row"
}}>
<div style={{ padding: 10 }}>
<div style={{
backgroundColor: "#FFC940" ,
padding: 20
}}>
#FFC940
</div>
<div style={{
backgroundColor: "#E9A133" ,
padding: 20
}}>
#E9A133
</div>
<div style={{
backgroundColor: "#D27B27" ,
padding: 20
}}>
#D27B27
</div>
<div style={{
backgroundColor: "#B9541A" ,
padding: 20
}}>
#B9541A
</div>
<div style={{
backgroundColor: "#9E2B0E" ,
padding: 20
}}>
#9E2B0E
</div>
</div>
<div style={{ padding: 10 }}>
<div style={{
backgroundColor: "#FFEEC5" ,
padding: 20
}}>
#FFEEC5
</div>
<div style={{
backgroundColor: "#F1AEA4" ,
padding: 20
}}>
#F1AEA4
</div>
<div style={{
backgroundColor: "#D37387" ,
padding: 20
}}>
#D37387
</div>
<div style={{
backgroundColor: "#A3416E" ,
padding: 20
}}>
#A3416E
</div>
<div style={{
backgroundColor: "#5C255C" ,
padding: 20
}}>
#5C255C
</div>
</div>
<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: "#E1BAE1" ,
padding: 20
}}>
#E1BAE1
</div>
<div style={{
backgroundColor: "#DD86AF" ,
padding: 20
}}>
#DD86AF
</div>
<div style={{
backgroundColor: "#C35989" ,
padding: 20
}}>
#C35989
</div>
<div style={{
backgroundColor: "#98366D" ,
padding: 20
}}>
#98366D
</div>
<div style={{
backgroundColor: "#5C255C" ,
padding: 20
}}>
#5C255C
</div>
</div>
</div>
</div>
</>
);
} export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#core/colors.sequential-color-schemes