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 Qualitative 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 qualitative color schemes use a series of unrelated colors to make a scheme that does not imply order, merely a difference in kind.
Syntax:
<h1 style={{color: "#147EB3"
| "#29A634" | "#D1980B" | "#D33D17"}}>
...
</h1>
<p style={{color: "#9D3F9D" | "#00A396" | "#DB2C6F" |
"#8EB125" | "#946638" | "#7961DB"}}>
...
</p>
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 Qualitative Color Schemes as the background color.
Javascript
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 Qualitative Color Schemes </h1> <div style={{ display: 'flex' }}> <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 style={{ backgroundColor: '#00A396', padding: 20, color: 'white' }}> #00A396 </div> <div style={{ backgroundColor: '#DB2C6F', padding: 20, color: 'white' }}> #DB2C6F </div> <div style={{ backgroundColor: '#8EB125', padding: 20, color: 'white' }}> #8EB125 </div> <div style={{ backgroundColor: '#946638', padding: 20, color: 'white' }}> #946638 </div> <div style={{ backgroundColor: '#7961DB', padding: 20, color: 'white' }}> #7961DB </div> </div> </div> ); } export default App; |
Output:
Example 2: Below example demonstrates the usage of Qualitative Color Schemes as the text typography color.
Javascript
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 Qualitative Color Schemes </h1> <div> <h1 style={{ color: '#147EB3' }}>#147EB3</h1> <h2 style={{ color: '#29A634' }}>#147EB3</h2> <h3 style={{ color: '#D1980B' }}>#D1980B</h3> <h4 style={{ color: '#D33D17' }}>#D33D17</h4> <h5 style={{ color: '#9D3F9D' }}>#9D3F9D</h5> <h6 style={{ color: '#00A396' }}>#00A396</h6> </div> </div> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#core/colors.qualitative-color-schemes
